/* ══════════════════════════════════════════════════════════════════════════
   SADHYA — A Feast Served on a Leaf
   One stylesheet. No images, no SVG, no fonts loaded, no libraries.
   Every leaf, lamp, flower and dish below is drawn with CSS alone.

   Contents
     1. Tokens          7. Buttons           13. Dish panel
     2. Base            8. Catalogue         14. Moments
     3. Ambience        9. Banana leaf       15. Finale
     4. Top bar        10. Dishes (generic)  16. Toast & noscript
     5. Stages         11. Food art (×20)    17. Responsive
     6. Welcome        12. Lamp & pookalam   18. Reduced motion
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. TOKENS ─────────────────────────────────────────────────────────── */

:root {
  /* Kerala palette */
  --green-950: #081b14;   /* deep night green   */
  --green-900: #0b2d20;   /* dark forest        */
  --green-800: #164a32;   /* banana-leaf deep   */
  --green-600: #2d7047;   /* leaf green         */
  --green-400: #6c9b58;   /* fresh green        */
  --gold:      #d6b45a;   /* kasavu gold        */
  --gold-warm: #e4c873;   /* warm gold          */
  --turmeric:  #d99b27;
  --cream:     #f7f0d8;   /* coconut cream      */
  --rice:      #fffdf4;
  --terracotta:#a95732;
  --chilli:    #9c382d;
  --brown:     #3a2518;

  /* Brass ramp (lamps, katoris, urulis) */
  --brass-hi:  #f0d492;
  --brass-mid: #c89b3c;
  --brass-low: #7a4c12;
  --brass-deep:#5e3a0d;

  /* Hairlines & washes */
  --line-gold:   rgba(214, 180, 90, .22);
  --line-gold-2: rgba(214, 180, 90, .45);
  --wash-panel:  rgba(10, 36, 24, .72);
  --scrim:       rgba(4, 14, 9, .68);

  /* Type */
  --serif: Georgia, 'Times New Roman', 'Noto Serif Malayalam', serif;
  --sans:  system-ui, -apple-system, 'Segoe UI', 'Noto Sans Malayalam', sans-serif;

  /* Motion */
  --ease-settle: cubic-bezier(.22, .9, .28, 1.04);
  --ease-soft:   cubic-bezier(.33, 0, .18, 1);

  --topbar-h: 56px;
}


/* ── 2. BASE ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` must always win, even over display:grid/flex set on the element */
[hidden] { display: none !important; }

html { overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  background:
    radial-gradient(130% 90% at 50% -10%, var(--green-900) 0%, var(--green-950) 58%),
    var(--green-950);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--gold-warm);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--gold); color: var(--green-950); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Small uppercase label — used everywhere */
.tp-label, .topbar-brand, .topbar-place, .welcome-place,
.group-title, .row-flavors, .panel-flavors, .moment-kicker,
.finale-label, .next-course, .chip-next {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .68rem;
}


/* ── 3. AMBIENCE ───────────────────────────────────────────────────────── */

.ambience { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* Vignette + gold dust + faint leaf veins */
.amb-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 1.1px at 22% 31%, rgba(214,180,90,.20) 0 1px, transparent 1.6px),
    radial-gradient(circle 1px  at 71% 64%, rgba(214,180,90,.14) 0 1px, transparent 1.5px),
    radial-gradient(circle .9px at 48% 82%, rgba(214,180,90,.11) 0 .9px, transparent 1.4px),
    repeating-linear-gradient(112deg, rgba(108,155,88,.028) 0 1px, transparent 1px 34px),
    radial-gradient(120% 85% at 50% 6%, rgba(45,112,71,.16), transparent 55%),
    radial-gradient(150% 110% at 50% 112%, rgba(0,0,0,.55), transparent 58%);
  background-size: 180px 180px, 240px 240px, 200px 200px, auto, auto, auto;
}

/* A huge, ghost-faint pookalam behind the welcome & finale */
.amb-pookalam {
  position: absolute;
  left: 50%; top: 42%;
  width: 140vmin; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(214,180,90,.028) 0 6deg, transparent 6deg 12deg),
    radial-gradient(circle, transparent 26%, rgba(214,180,90,.03) 44%, transparent 52%,
                    rgba(214,180,90,.022) 66%, transparent 74%);
  opacity: 0;
  transition: opacity 1.6s ease;
  animation: pkSpin 140s linear infinite;
}

body[data-stage="welcome"]  .amb-pookalam,
body[data-stage="finale"]   .amb-pookalam { opacity: 1; }

/* Kasavu bands — cream weave with woven gold threadwork */
.kasavu {
  position: absolute; left: 0; right: 0;
  height: 7px;
  background:
    repeating-linear-gradient(90deg, rgba(122,76,18,.5) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--gold-warm), var(--brass-mid));
  box-shadow: 0 0 14px rgba(214,180,90,.35);
}
.kasavu--top    { top: 0; }
.kasavu--bottom { bottom: 0; }

/* Drifting flower petals (elements added by JS) */
.petal {
  position: absolute;
  top: -5vh;
  left: var(--px, 50%);
  width: .55rem; height: .85rem;
  border-radius: 62% 38% 58% 42% / 55% 62% 38% 45%;
  background: linear-gradient(150deg, var(--pc1, var(--gold-warm)), var(--pc2, var(--turmeric)));
  opacity: .75;
  animation: petalFall var(--pd, 18s) linear var(--pdel, 0s) infinite;
  will-change: transform;
}

@keyframes petalFall {
  from { transform: translate3d(0, -6vh, 0) rotate(0deg); }
  to   { transform: translate3d(var(--pdrift, 6vw), 112vh, 0) rotate(var(--prot, 420deg)); }
}


/* ── 4. TOP BAR ────────────────────────────────────────────────────────── */

.topbar {
  position: fixed;
  top: 7px; left: 0; right: 0;
  z-index: 40;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: linear-gradient(180deg, rgba(8,27,20,.94), rgba(8,27,20,.72));
  border-bottom: 1px solid var(--line-gold);
}

/* The chrome bows out for the blessing */
body[data-stage="finale"] .topbar { opacity: 0; pointer-events: none; }
.topbar { transition: opacity 1.2s ease; }

.topbar-brand { color: var(--gold-warm); }
.topbar-place { color: rgba(247,240,216,.55); }

.topbar-progress {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: baseline;
  gap: .8rem;
}
.tp-label { color: rgba(247,240,216,.5); }
.tp-count {
  font-family: var(--serif);
  font-size: .95rem;
  color: var(--gold-warm);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}


/* ── 5. STAGES ─────────────────────────────────────────────────────────── */

/* All stages share one grid cell, so a leaving stage crossfades under the
   arriving one instead of stacking a viewport of empty space above it. */
main { display: grid; }

.stage {
  /* NB: no z-index here — the mobile catalogue sheet inside must be able to
     stack above the body-level scrim, so stages must not trap it in their
     own stacking context. */
  grid-area: 1 / 1;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  opacity: 0;
  transform: scale(.985);
  transition: opacity .65s var(--ease-soft), transform .65s var(--ease-soft);
}
.stage.is-active { opacity: 1; transform: none; }
.stage.is-leaving { opacity: 0; transform: scale(1.02); }


/* ── 6. WELCOME ────────────────────────────────────────────────────────── */

.stage-welcome {
  display: grid;
  place-items: center;
  padding: calc(var(--topbar-h) + 3vh) 5vw 6vh;
}

.welcome-inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.5rem, 6vw, 5.5rem);
}

.welcome-title { text-align: center; max-width: 40rem; }

.welcome-eyebrow {
  font-family: var(--serif);
  color: rgba(214,180,90,.8);
  letter-spacing: .06em; /* Malayalam script dislikes wide tracking */
  font-size: .95rem;
  margin-bottom: 2.2rem;
}

.welcome-name { display: block; line-height: 1; }

.welcome-ml {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.4rem, 11vw, 8.5rem);
  color: var(--rice);
  text-shadow: 0 0 60px rgba(214,180,90,.35);
}

.welcome-en {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  letter-spacing: .55em;
  text-indent: .55em; /* balances the trailing tracking */
  color: var(--gold-warm);
}

.welcome-tag {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: rgba(247,240,216,.82);
}

.welcome-place { margin-top: 2.4rem; color: rgba(247,240,216,.5); }

.welcome-invite {
  margin-top: 2.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--cream);
}

.stage-welcome.is-active .welcome-eyebrow,
.stage-welcome.is-active .welcome-name,
.stage-welcome.is-active .welcome-tag,
.stage-welcome.is-active .welcome-place,
.stage-welcome.is-active .welcome-invite,
.stage-welcome.is-active .btn-invite { animation: riseIn 1s var(--ease-soft) both; }
.stage-welcome.is-active .welcome-name   { animation-delay: .12s; }
.stage-welcome.is-active .welcome-tag    { animation-delay: .28s; }
.stage-welcome.is-active .welcome-place  { animation-delay: .4s; }
.stage-welcome.is-active .welcome-invite { animation-delay: .55s; }
.stage-welcome.is-active .btn-invite     { animation-delay: .7s; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}


/* ── 7. BUTTONS ────────────────────────────────────────────────────────── */

/* The invitation — bordered gold, fills on hover */
.btn-invite {
  margin-top: 2.2rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 2.6rem;
  border: 1px solid var(--line-gold-2);
  color: var(--cream);
  letter-spacing: .32em;
  text-indent: .1em;
  font-size: .8rem;
  transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.btn-invite:hover, .btn-invite:focus-visible {
  background: linear-gradient(180deg, var(--gold-warm), var(--brass-mid));
  border-color: var(--gold-warm);
  color: var(--green-950);
  box-shadow: 0 0 34px rgba(214,180,90,.35);
}
.btn-invite-dot {
  width: .38rem; height: .38rem;
  background: currentColor;
  transform: rotate(45deg);
  opacity: .8;
}

/* Solid gold — eat, add payasam */
.btn-gold {
  display: inline-block;
  padding: .85rem 2rem;
  background: linear-gradient(180deg, var(--gold-warm), var(--brass-mid));
  color: var(--green-950);
  letter-spacing: .26em;
  text-indent: .13em;
  font-size: .74rem;
  font-weight: 600;
  border-radius: 2px;
  transition: filter .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.btn-gold:hover:not(:disabled), .btn-gold:focus-visible { filter: brightness(1.08); box-shadow: 0 0 26px rgba(214,180,90,.35); }
.btn-gold:disabled { opacity: .35; cursor: not-allowed; }

/* Quiet — continue, skip */
.btn-quiet {
  padding: .7rem 1.6rem;
  color: rgba(247,240,216,.75);
  letter-spacing: .24em;
  font-size: .7rem;
  border-bottom: 1px solid var(--line-gold);
  transition: color .3s ease, border-color .3s ease;
}
.btn-quiet:hover, .btn-quiet:focus-visible { color: var(--gold-warm); border-color: var(--gold-warm); }

/* The finale trigger */
.btn-complete {
  min-width: min(90vw, 23rem);
  padding: 1.05rem 2.6rem;
  border: 1px solid var(--line-gold);
  color: rgba(214,180,90,.55);
  letter-spacing: .3em;
  text-indent: .15em;
  font-size: .78rem;
  transition: all .4s ease;
}
.btn-complete:disabled { cursor: not-allowed; }
.btn-complete:not(:disabled) {
  background: linear-gradient(180deg, var(--gold-warm), var(--brass-mid));
  border-color: var(--gold-warm);
  color: var(--green-950);
  font-weight: 600;
  animation: goldPulse 2.6s ease-in-out infinite;
}
.btn-complete:not(:disabled):hover { filter: brightness(1.08); }

@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(214,180,90,.25); }
  50%      { box-shadow: 0 0 42px rgba(214,180,90,.55); }
}


/* ── 8. THE FEAST LAYOUT & CATALOGUE ───────────────────────────────────── */

.stage-feast {
  display: grid;
  grid-template-columns: minmax(300px, 384px) 1fr;
  padding-top: calc(var(--topbar-h) + 7px);
}

/* Everything melts before the finale — and stops taking clicks at once */
.stage-feast.is-fading { pointer-events: none; }
.stage-feast.is-fading .catalogue,
.stage-feast.is-fading .feast-actions,
.stage-feast.is-fading .pookalam-stage,
.stage-feast.is-fading .feast-bar { opacity: 0; transition: opacity 1s ease; }
.stage-feast.is-fading .dish { opacity: 0; transition: opacity 1.1s ease; }
.stage-feast.is-fading .leaf { opacity: 0; transform: scale(.9) translateY(5vh); transition: opacity 1.5s ease, transform 1.5s ease; }

.catalogue {
  height: calc(100vh - var(--topbar-h) - 7px);
  height: calc(100dvh - var(--topbar-h) - 7px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.8rem 1.6rem 3.5rem;
  background: var(--wash-panel);
  border-right: 1px solid var(--line-gold);
  scrollbar-width: thin;
  scrollbar-color: rgba(214,180,90,.35) transparent;
}
.catalogue::-webkit-scrollbar { width: 6px; }
.catalogue::-webkit-scrollbar-thumb { background: rgba(214,180,90,.3); border-radius: 3px; }

.catalogue-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .34em;
  color: var(--gold-warm);
}
.catalogue-sub {
  margin-top: .6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: rgba(247,240,216,.85);
}
.catalogue-note {
  margin-top: .9rem;
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(247,240,216,.68);
}

/* Course groups */
.course-group { margin-top: 2.2rem; }

.group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line-gold);
  position: relative;
}
.group-head::after {
  /* tiny kasavu diamond on the rule */
  content: "";
  position: absolute;
  left: 0; bottom: -3.5px;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
.group-title { color: rgba(247,240,216,.72); }
.group-meta { display: flex; align-items: center; gap: .6rem; flex: none; }
.group-count {
  font-size: .68rem;
  letter-spacing: .18em;
  color: rgba(214,180,90,.65);
  font-variant-numeric: tabular-nums;
}
.chip-next {
  font-size: .56rem;
  letter-spacing: .22em;
  color: var(--green-950);
  background: var(--gold-warm);
  padding: .18rem .5rem .14rem;
  border-radius: 999px;
  animation: chipIn .5s var(--ease-settle) both;
}
@keyframes chipIn { from { opacity: 0; transform: translateY(4px); } }

.course-rows { list-style: none; margin: 0; padding: 0; }

/* Editorial menu rows */
.cat-row {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .95rem 0;
  border-bottom: 1px solid rgba(214,180,90,.12);
}

.cat-mini {
  width: 66px; height: 54px;
  display: grid;
  place-items: center;
  overflow: visible;
}
.cat-mini .art { font-size: 4.1px; }

.row-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.06rem;
  color: var(--rice);
  line-height: 1.25;
}
.row-ml {
  font-size: .8rem;
  color: rgba(214,180,90,.85);
  margin-top: .1rem;
}
.row-flavors {
  margin-top: .35rem;
  font-size: .62rem;
  letter-spacing: .2em;
  color: rgba(247,240,216,.68);
}

.btn-add {
  align-self: center;
  padding: .5rem 1rem;
  border: 1px solid var(--line-gold-2);
  color: var(--gold-warm);
  font-size: .62rem;
  letter-spacing: .26em;
  text-indent: .13em;
  border-radius: 2px;
  transition: background .3s ease, color .3s ease, opacity .3s ease;
  white-space: nowrap;
}
.btn-add:hover:not(:disabled), .btn-add:focus-visible {
  background: var(--gold-warm);
  color: var(--green-950);
}
.btn-add.is-added {
  border-color: rgba(214,180,90,.18);
  color: rgba(247,240,216,.4);
  cursor: default;
}

/* Payasam — the locked chamber */
.payasam-sec {
  margin-top: 2.6rem;
  padding: 1.3rem 1.1rem 1.5rem;
  border: 1px solid var(--line-gold);
  border-radius: 4px;
  position: relative;
  transition: border-color .8s ease, box-shadow .8s ease;
}
.payasam-sec.is-locked { opacity: .82; }
.payasam-sec.is-unlocked {
  border-color: var(--gold-warm);
  box-shadow: 0 0 34px rgba(214,180,90,.22), inset 0 0 24px rgba(214,180,90,.07);
  animation: payasamReveal 1.1s var(--ease-settle) both;
}
@keyframes payasamReveal {
  from { transform: translateY(10px); opacity: .4; }
  to   { transform: none; opacity: 1; }
}

.payasam-lock {
  margin-top: .8rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: rgba(247,240,216,.75);
}
.lock-glyph { font-style: normal; margin-right: .45rem; opacity: .9; }
.payasam-hint {
  margin-top: .55rem;
  font-size: .72rem;
  color: var(--gold-warm);
  line-height: 1.55;
}

.payasam-lead {
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--gold-warm);
}
.payasam-lead-en {
  margin-top: .35rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .9rem;
  color: rgba(247,240,216,.7);
}

.payasam-choices { margin-top: 1.1rem; display: grid; gap: .5rem; }

.pay-choice {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .55rem .6rem;
  border: 1px solid rgba(214,180,90,.16);
  border-radius: 3px;
  text-align: left;
  transition: border-color .3s ease, background .3s ease;
}
.pay-choice:hover:not(:disabled) { border-color: var(--line-gold-2); }
.pay-choice:disabled { cursor: default; opacity: .4; }
.pay-choice[aria-checked="true"] {
  border-color: var(--gold-warm);
  background: rgba(214,180,90,.08);
}
.pay-choice .cat-mini { width: 58px; height: 44px; }
.pay-choice .cat-mini .art { font-size: 3.6px; }
.pay-dot {
  width: .85rem; height: .85rem;
  border: 1px solid var(--line-gold-2);
  border-radius: 50%;
  position: relative;
}
.pay-choice[aria-checked="true"] .pay-dot::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--gold-warm);
}

.btn-add-payasam { margin-top: 1.1rem; width: 100%; text-align: center; }

.catalogue-close { display: none; }


/* ── 9. THE BANANA LEAF ────────────────────────────────────────────────── */

.leaf-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  height: calc(100vh - var(--topbar-h) - 7px);
  height: calc(100dvh - var(--topbar-h) - 7px);
  padding: 2vh 3vw 3vh;
}

.leaf {
  position: relative;
  width: min(100%, 1020px, calc((100vh - var(--topbar-h) - 210px) * 2.1));
  width: min(100%, 1020px, calc((100dvh - var(--topbar-h) - 210px) * 2.1));
  aspect-ratio: 2.08 / 1;
  filter: drop-shadow(0 34px 42px rgba(0, 0, 0, .5));
}
.stage-feast.is-active .leaf { animation: leafIn 1s var(--ease-settle) both; }
@keyframes leafIn {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* The leaf itself: tip to the left, cut stem-end to the right */
.leaf-body {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: 58% 7% 8% 56% / 62% 44% 48% 40%;
  background:
    radial-gradient(120% 100% at 28% 16%, rgba(255,255,230,.13), transparent 44%),
    radial-gradient(110% 120% at 72% 96%, rgba(4, 18, 11, .42), transparent 55%),
    radial-gradient(60% 130% at 3% 50%, rgba(190,215,130,.12), transparent 40%),
    linear-gradient(172deg, #2f7449 0%, #2a6c43 26%, #21603b 52%, #185232 76%, #124529 100%);
  box-shadow:
    inset 0 0 48px rgba(5, 20, 12, .55),
    inset 0 -16px 34px rgba(0, 0, 0, .3),
    inset 0 3px 14px rgba(220, 240, 180, .14);
}
.leaf-body::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(9, 32, 20, .5);
}

/* Vein fields — top half slants one way, bottom half the other */
.leaf-half {
  position: absolute;
  left: 3%; right: 1%;
  height: 47%;
}
.leaf-half--top {
  top: 0;
  background:
    repeating-linear-gradient(99deg,  rgba(235,250,205,.075) 0 1.5px, transparent 1.5px 30px),
    repeating-linear-gradient(99deg,  rgba(8, 27, 18, .12)   0 1px,   transparent 1px 10px);
}
.leaf-half--bottom {
  bottom: 0;
  background:
    repeating-linear-gradient(81deg, rgba(235,250,205,.075) 0 1.5px, transparent 1.5px 30px),
    repeating-linear-gradient(81deg, rgba(8, 27, 18, .12)   0 1px,   transparent 1px 10px);
}

/* Midrib */
.leaf-rib {
  position: absolute;
  left: 1.5%; right: 0;
  top: 50%; height: 6.5%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg,
    rgba(240, 246, 190, 0)   0%,
    rgba(224, 232, 150, .38) 38%,
    rgba(244, 248, 200, .55) 50%,
    rgba(90, 120, 60, .45)   64%,
    rgba(8, 27, 16, .3)      100%);
}
.leaf-rib::after {
  content: "";
  position: absolute;
  left: 0; right: 2%;
  top: 48%; height: 1.5px;
  background: linear-gradient(90deg, rgba(250,252,210,.7), rgba(250,252,210,.25) 85%, transparent);
}

/* Soft sheen band across the blade */
.leaf-sheen {
  position: absolute;
  left: 12%; top: 6%;
  width: 46%; height: 34%;
  border-radius: 50%;
  transform: rotate(-5deg);
  background: radial-gradient(closest-side, rgba(255,255,235,.10), transparent 72%);
}

/* Torn slits along the edge — every real leaf has them */
.leaf-notch {
  position: absolute;
  width: 1.5%; height: 9%;
  background: linear-gradient(180deg, rgba(6,22,13,.55), rgba(6,22,13,0));
  border-radius: 50%;
}
.leaf-notch--a { left: 30%; top: -1%; transform: rotate(14deg); }
.leaf-notch--b { left: 62%; bottom: -1.5%; top: auto; transform: rotate(-12deg); background: linear-gradient(0deg, rgba(6,22,13,.55), rgba(6,22,13,0)); }

.leaf-dishes { position: absolute; inset: 0; }

.leaf-hint {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -60%);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.95rem, 1.6vw, 1.2rem);
  color: rgba(250, 252, 220, .68);
  text-align: center;
  pointer-events: none;
  transition: opacity .6s ease;
}
.leaf.has-dishes .leaf-hint { opacity: 0; }

.feast-actions { text-align: center; }
.next-course {
  margin-bottom: .8rem;
  color: rgba(214,180,90,.8);
  font-size: .62rem;
}
.complete-hint {
  margin-top: .7rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .88rem;
  color: rgba(247,240,216,.55);
}

.feast-bar { display: none; }

/* ····· The payasam phase — the savoury menu steps aside ····· */

.stage-feast.is-payasam .course-group,
.stage-feast.is-payasam .catalogue-note { display: none; }
.stage-feast.is-payasam .payasam-sec { margin-top: 1.6rem; }

/* ····· The pookalam phase — leaf away, flowers down ····· */

.stage-feast.is-pookalam { grid-template-columns: 1fr; }
.stage-feast.is-pookalam .catalogue { display: none; }
.stage-feast.is-pookalam .feast-bar { display: none; }

.leaf.is-cleared {
  opacity: 0;
  transform: scale(.92) translateY(3vh);
  pointer-events: none;
  transition: opacity .95s ease, transform .95s ease;
}

.pookalam-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
  animation: riseIn 1s var(--ease-soft) both;
}
.pookalam-ml {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  color: var(--rice);
  text-shadow: 0 0 44px rgba(214, 180, 90, .3);
}
.pookalam-label {
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .68rem;
  color: rgba(214, 180, 90, .85);
}
.pookalam-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: .98rem;
  color: rgba(247, 240, 216, .78);
}
.pookalam--build {
  width: min(64vw, 38vh, 300px);
  margin: .6rem 0 .4rem;
  /* faint swept-ground guide so the empty circle reads as an invitation */
  background: radial-gradient(circle, rgba(214,180,90,.08), rgba(214,180,90,.03) 55%, transparent 74%);
  outline: 1px dashed rgba(214, 180, 90, .3);
  outline-offset: 6px;
}
.pookalam--build .pk {
  opacity: 0;
  transform: scale(.62);
  transition: opacity .7s var(--ease-settle), transform .7s var(--ease-settle);
}
.pookalam--build .pk.is-laid { opacity: 1; transform: none; }
.pookalam--build.is-complete { box-shadow: 0 0 90px rgba(214, 180, 90, .45); }
.ring-count {
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .66rem;
  color: rgba(247, 240, 216, .68);
}

.btn-pookalam { letter-spacing: .28em; text-indent: .14em; }


/* ── 10. DISHES ON THE LEAF (generic) ──────────────────────────────────── */

.dish {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  font-size: calc(var(--leaf-scale, 1) * var(--s, 10) * 1px);
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.dish:focus-visible { outline-offset: 6px; border-radius: 50%; }

/* Grounding shadow */
.dish::before {
  content: "";
  position: absolute;
  left: 6%; right: 6%;
  bottom: -4%; height: 26%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(6, 24, 14, .4), transparent 72%);
}

/* Landing bounce when a dish arrives */
.dish.is-landing .art { animation: dishLand .62s var(--ease-settle) both; }
@keyframes dishLand {
  0%   { transform: scale(.55); }
  55%  { transform: scale(1.1); }
  78%  { transform: scale(.95); }
  100% { transform: scale(1); }
}

/* The flying clone (JS positions it fixed and animates transform) */
.fly-clone {
  position: fixed;
  z-index: 65;
  pointer-events: none;
  margin: 0;
}


/* ── 11. FOOD ART — twenty dishes, all CSS ─────────────────────────────── */

.art { position: relative; display: block; width: 10em; height: 7em; }
.art > i { display: none; }
.art > i, .art > i::before, .art > i::after { position: absolute; }

/* ····· Katori — the small brass bowl the liquid curries arrive in ····· */
.art--olan, .art--parippu, .art--sambar, .art--rasam, .art--kaalan, .art--moru {
  width: 8.4em; height: 6em;
}
.art--olan::before, .art--parippu::before, .art--sambar::before,
.art--rasam::before, .art--kaalan::before, .art--moru::before {
  content: "";
  position: absolute;
  left: 9%; right: 9%; top: 32%; bottom: 5%;
  border-radius: 15% 15% 46% 46% / 26% 26% 100% 100%;
  background: linear-gradient(180deg, #d2a855 0%, #96691f 40%, var(--brass-deep) 92%);
  box-shadow:
    inset 0 -.5em .65em rgba(24, 12, 2, .48),
    inset 0 .12em .18em rgba(255, 241, 200, .55);
}
.art--olan::after, .art--parippu::after, .art--sambar::after,
.art--rasam::after, .art--kaalan::after, .art--moru::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 13.5%; right: 13.5%; top: 23%; height: 31%;
  border-radius: 50%;
  background: var(--liq);
  box-shadow:
    0 0 0 .15em #b98a3b,
    inset 0 .2em .42em rgba(30, 10, 0, .42),
    inset 0 -.1em .22em rgba(255, 255, 255, .15);
}
.art--olan > i, .art--parippu > i, .art--sambar > i,
.art--rasam > i, .art--kaalan > i, .art--moru > i { z-index: 2; }

/* Olan — ash gourd in coconut milk */
.art--olan { --liq: radial-gradient(60% 60% at 40% 35%, #f7efd4, #ede0bc 68%, #dbca9d 100%); }
.art--olan i:nth-child(1) { display: block; width: .95em; height: .8em; left: 32%; top: 30%;
  background: linear-gradient(160deg, #f8f2dd, #ded1ac); border-radius: 22%; transform: rotate(-12deg);
  box-shadow: 0 .07em .12em rgba(90, 70, 20, .35); }
.art--olan i:nth-child(2) { display: block; width: .5em; height: .42em; left: 56%; top: 38%;
  background: radial-gradient(circle at 35% 30%, #96502f, #6d3520); border-radius: 46%; }
.art--olan i:nth-child(3) { display: block; width: 1.25em; height: .3em; left: 42%; top: 27%;
  background: #3e6b34; border-radius: .3em; transform: rotate(24deg); }

/* Parippu — ghee-lit yellow dal */
.art--parippu { --liq: radial-gradient(56% 52% at 40% 34%, #ecc95e, #d9a927 62%, #b6851b 100%); }
.art--parippu i:nth-child(1) { display: block; width: 2.5em; height: .85em; left: 26%; top: 27%;
  background: radial-gradient(closest-side, rgba(255, 247, 205, .65), transparent 78%);
  border-radius: 50%; transform: rotate(-10deg); }
.art--parippu i:nth-child(2) { display: block; width: 1em; height: .26em; left: 55%; top: 40%;
  background: #4c7440; border-radius: .3em; transform: rotate(-32deg); }

/* Sambar — tamarind-brown with a drumstick afloat */
.art--sambar { --liq: radial-gradient(56% 52% at 42% 34%, #c86e2a, #a9531d 60%, #8a3f1a 100%); }
.art--sambar i:nth-child(1) { display: block; width: 2.15em; height: .62em; left: 26%; top: 32%;
  background:
    repeating-linear-gradient(90deg, rgba(90, 80, 30, .35) 0 .12em, transparent .12em .5em),
    linear-gradient(180deg, #cfc48e, #a89f6a);
  border-radius: .4em; transform: rotate(-17deg);
  box-shadow: 0 .06em .1em rgba(60, 30, 5, .4); }
.art--sambar i:nth-child(2) { display: block; width: .55em; height: .5em; left: 62%; top: 30%;
  background: radial-gradient(circle at 35% 30%, #cf5330, #a03420); border-radius: 50%; }
.art--sambar i:nth-child(3) { display: block; width: .34em; height: .3em; left: 48%; top: 44%;
  background: #4c7440; border-radius: 50% 50% 50% 20%; transform: rotate(40deg); }

/* Rasam — thin, dark, peppery */
.art--rasam { --liq: radial-gradient(62% 56% at 45% 34%, #9c4526, #7e2f1e 56%, #5c1f12 100%); }
.art--rasam i:nth-child(1) { display: block; width: 1.15em; height: .3em; left: 30%; top: 34%;
  background: #2f5228; border-radius: .3em 50% .3em 50%; transform: rotate(-24deg); }
.art--rasam i:nth-child(2) { display: block; width: .16em; height: .16em; left: 56%; top: 30%;
  background: #241a10; border-radius: 50%;
  box-shadow: .5em .35em 0 0 #241a10, -.3em .55em 0 0 #241a10, .95em -.05em 0 0 #241a10; }
.art--rasam i:nth-child(3) { display: block; left: 17%; right: 17%; top: 24%; height: 27%;
  border-radius: 50%; border: .12em solid rgba(240, 140, 60, .3); }

/* Kaalan — thick yogurt and yam */
.art--kaalan { --liq: radial-gradient(56% 52% at 40% 34%, #e6c86a, #cfa43a 62%, #a67d24 100%); }
.art--kaalan i:nth-child(1) { display: block; width: .95em; height: .8em; left: 34%; top: 30%;
  background: linear-gradient(160deg, #9a6634, #74481f); border-radius: 26%; transform: rotate(14deg);
  box-shadow: 0 .07em .12em rgba(60, 35, 8, .4); }
.art--kaalan i:nth-child(2) { display: block; width: .75em; height: .6em; left: 55%; top: 38%;
  background: linear-gradient(160deg, #eddfae, #cdb87c); border-radius: 30%; transform: rotate(-18deg); }

/* Moru curry — pale spiced buttermilk */
.art--moru { --liq: radial-gradient(60% 56% at 40% 32%, #f4e6ab, #e6d083 62%, #c6a854 100%); }
.art--moru i:nth-child(1) { display: block; width: 1.1em; height: .28em; left: 30%; top: 30%;
  background: #a03a24; border-radius: .3em; transform: rotate(18deg); }
.art--moru i:nth-child(2) { display: block; width: 1.05em; height: .28em; left: 52%; top: 40%;
  background: #3e6b34; border-radius: .3em 50% .3em 50%; transform: rotate(-30deg); }
.art--moru i:nth-child(3) { display: block; width: .14em; height: .14em; left: 46%; top: 27%;
  background: rgba(255, 252, 235, .9); border-radius: 50%;
  box-shadow: .4em .3em 0 0 rgba(255,252,235,.8), -.3em .4em 0 0 rgba(255,252,235,.7); }

/* ····· Mounds served straight on the leaf ····· */

/* Avial — vegetable batons under coconut */
.art--avial { width: 9.4em; height: 6.4em; }
.art--avial::before {
  content: "";
  position: absolute; inset: 21% 6% 7%;
  border-radius: 48% 52% 44% 56% / 66% 60% 40% 36%;
  background:
    radial-gradient(circle .13em at 22% 32%, rgba(255,255,255,.9) 0 .065em, transparent .11em) 0 0 / 1.15em .95em,
    radial-gradient(48% 42% at 34% 26%, rgba(255, 250, 220, .42), transparent 62%),
    linear-gradient(165deg, #efe3b8 0%, #ddcd9c 48%, #c2ad74 100%);
  box-shadow: inset 0 -.42em .6em rgba(105, 88, 40, .42);
}
.art--avial > i { z-index: 2; width: 1.65em; height: .5em; border-radius: .3em;
  box-shadow: inset 0 .07em .1em rgba(255,255,255,.35), 0 .07em .13em rgba(60, 40, 10, .32); }
.art--avial i:nth-child(1) { display: block; left: 17%; top: 34%; background: #dd8a3c; transform: rotate(-18deg); }
.art--avial i:nth-child(1)::after { content: ""; inset: 0; border-radius: inherit; background: #7fa05b;
  transform: translate(2em, 1em) rotate(42deg); box-shadow: inherit; }
.art--avial i:nth-child(2) { display: block; left: 47%; top: 30%; background: #a8b87a; transform: rotate(12deg); }
.art--avial i:nth-child(2)::after { content: ""; inset: 0; border-radius: inherit; background: #e6d9a0;
  transform: translate(.4em, 1.35em) rotate(-28deg); box-shadow: inherit; }
.art--avial i:nth-child(3) { display: block; left: 30%; top: 52%; background: #7fa05b; transform: rotate(64deg); }
.art--avial i:nth-child(3)::after { content: ""; inset: 0; border-radius: inherit; background: #dd8a3c;
  transform: translate(1.7em, -.5em) rotate(-70deg); box-shadow: inherit; }

/* Thoran — shredded greens & coconut */
.art--thoran { width: 8.4em; height: 5.9em; }
.art--thoran::before {
  content: "";
  position: absolute; inset: 23% 9% 8%;
  border-radius: 46% 54% 48% 52% / 62% 66% 38% 34%;
  background:
    radial-gradient(circle .11em at 30% 40%, #f7f0d8 0 .055em, transparent .1em) 0 0 / .95em .8em,
    radial-gradient(circle .08em at 68% 26%, #2e2a18 0 .04em, transparent .08em) .2em .3em / 1.3em 1.05em,
    radial-gradient(46% 40% at 34% 26%, rgba(240, 255, 220, .3), transparent 62%),
    linear-gradient(160deg, #6c9b58 0%, #557e45 52%, #3c5c33 100%);
  box-shadow: inset 0 -.4em .55em rgba(20, 40, 16, .5);
}
.art--thoran::after {
  content: "";
  position: absolute;
  right: 12%; top: 14%;
  width: 34%; height: 38%;
  border-radius: 50% 50% 46% 54% / 60% 62% 40% 38%;
  background:
    radial-gradient(circle .1em at 40% 45%, #f7f0d8 0 .05em, transparent .09em) 0 0 / .8em .7em,
    linear-gradient(150deg, #77a763 0%, #557e45 70%);
  box-shadow: inset 0 -.2em .3em rgba(20, 40, 16, .45);
}

/* Erissery — pumpkin under roasted coconut */
.art--erissery { width: 8.6em; height: 6em; }
.art--erissery::before {
  content: "";
  position: absolute; inset: 22% 8% 7%;
  border-radius: 50% 50% 46% 54% / 64% 60% 40% 36%;
  background:
    radial-gradient(circle .12em at 34% 30%, #4e2812 0 .06em, transparent .1em) 0 0 / .85em .7em,
    radial-gradient(circle .09em at 70% 45%, #3a2518 0 .045em, transparent .08em) .3em .1em / 1.1em .9em,
    radial-gradient(48% 40% at 36% 24%, rgba(255, 220, 150, .38), transparent 60%),
    linear-gradient(160deg, #c98f3a 0%, #b0762b 50%, #8a5a1e 100%);
  box-shadow: inset 0 -.4em .55em rgba(70, 40, 8, .5);
}
.art--erissery > i { z-index: 2; }
.art--erissery i:nth-child(1) { display: block; width: .95em; height: .8em; left: 30%; top: 34%;
  background: linear-gradient(155deg, #d99b3f, #a86a22); border-radius: 28%; transform: rotate(-10deg);
  box-shadow: inset 0 .08em .12em rgba(255, 230, 170, .5), 0 .07em .12em rgba(60, 35, 8, .4); }
.art--erissery i:nth-child(2) { display: block; width: .55em; height: .45em; left: 58%; top: 30%;
  background: #7e5a34; border-radius: 40%; transform: rotate(20deg); }

/* Pachadi — fruit folded into pale yogurt */
.art--pachadi { width: 7.6em; height: 5.4em; }
.art--pachadi::before {
  content: "";
  position: absolute; inset: 24% 9% 9%;
  border-radius: 48% 52% 46% 54% / 66% 62% 38% 34%;
  background:
    radial-gradient(46% 40% at 35% 25%, rgba(255, 255, 245, .55), transparent 62%),
    linear-gradient(160deg, #f0e2c0 0%, #e3d0a4 55%, #c9b17e 100%);
  box-shadow: inset 0 -.34em .5em rgba(120, 95, 45, .38);
}
.art--pachadi > i { z-index: 2; }
.art--pachadi i:nth-child(1) { display: block; width: .7em; height: .6em; left: 30%; top: 36%;
  background: radial-gradient(circle at 35% 30%, #e8b04e, #c98a2c); border-radius: 40%; transform: rotate(14deg); }
.art--pachadi i:nth-child(2) { display: block; width: .55em; height: .5em; left: 55%; top: 32%;
  background: radial-gradient(circle at 35% 30%, #f2d489, #d9b055); border-radius: 45%; }
.art--pachadi i:nth-child(3) { display: block; width: .9em; height: .24em; left: 42%; top: 52%;
  background: #a03a24; border-radius: .3em; transform: rotate(-20deg); opacity: .85; }

/* Kichadi — cucumber in mustard-flecked curd */
.art--kichadi { width: 7.6em; height: 5.4em; }
.art--kichadi::before {
  content: "";
  position: absolute; inset: 24% 9% 9%;
  border-radius: 52% 48% 50% 50% / 62% 66% 34% 38%;
  background:
    radial-gradient(circle .07em at 40% 45%, #2e2a18 0 .035em, transparent .07em) 0 0 / 1.15em .95em,
    radial-gradient(46% 40% at 34% 24%, rgba(255, 255, 248, .6), transparent 62%),
    linear-gradient(160deg, #f4eedc 0%, #e7ddc0 55%, #cfc09a 100%);
  box-shadow: inset 0 -.34em .5em rgba(115, 100, 55, .38);
}
.art--kichadi > i { z-index: 2; }
.art--kichadi i:nth-child(1) { display: block; width: 1.15em; height: .34em; left: 28%; top: 36%;
  background: linear-gradient(90deg, #b9c48e, #99a86e); border-radius: .3em; transform: rotate(-14deg); }
.art--kichadi i:nth-child(2) { display: block; width: 1em; height: .3em; left: 52%; top: 46%;
  background: linear-gradient(90deg, #c6cf9d, #a3b077); border-radius: .3em; transform: rotate(20deg); }

/* Pickle — a fierce little heap */
.art--pickle { width: 6.4em; height: 4.9em; }
.art--pickle::before {
  content: "";
  position: absolute; inset: 27% 12% 10%;
  border-radius: 46% 54% 50% 50% / 70% 66% 34% 30%;
  background:
    radial-gradient(40% 40% at 34% 26%, rgba(255, 140, 80, .4), transparent 62%),
    linear-gradient(160deg, #a73a22 0%, #7e2a1b 58%, #571b10 100%);
  box-shadow: inset 0 -.3em .45em rgba(40, 8, 4, .6);
}
.art--pickle > i { z-index: 2; }
.art--pickle i:nth-child(1) { display: block; width: .62em; height: .52em; left: 30%; top: 36%;
  background: radial-gradient(circle at 30% 25%, #c65a35, #96311d); border-radius: 32%; transform: rotate(-16deg);
  box-shadow: inset .05em .06em .08em rgba(255, 190, 140, .5); }
.art--pickle i:nth-child(2) { display: block; width: .5em; height: .46em; left: 52%; top: 30%;
  background: radial-gradient(circle at 30% 25%, #b4512f, #872b18); border-radius: 36%; transform: rotate(24deg);
  box-shadow: inset .04em .05em .07em rgba(255, 190, 140, .45); }
.art--pickle i:nth-child(3) { display: block; left: 4%; right: 4%; bottom: 4%; height: .55em;
  border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, rgba(220, 110, 40, .35), transparent 80%); }
.art--pickle::after {
  content: "";
  position: absolute; z-index: 3;
  left: 34%; top: 30%;
  width: .3em; height: .22em;
  border-radius: 50%;
  background: rgba(255, 240, 220, .55);
}

/* ····· Crisp things ····· */

/* Pappadam — blistered golden moon */
.art--pappadam { width: 11.2em; height: 7.8em; }
.art--pappadam::before {
  content: "";
  position: absolute; inset: 7% 4%;
  border-radius: 47% 53% 49% 51% / 52% 46% 54% 48%;
  background:
    radial-gradient(circle .2em at 26% 30%, rgba(184, 130, 40, .4) 0 .1em, transparent .17em) 0 0 / 1.7em 1.5em,
    radial-gradient(circle .13em at 64% 60%, rgba(255, 246, 216, .9) 0 .065em, transparent .12em) .4em .3em / 1.3em 1.1em,
    radial-gradient(circle .16em at 45% 75%, rgba(200, 150, 60, .35) 0 .08em, transparent .14em) .2em .5em / 2em 1.7em,
    radial-gradient(110% 100% at 40% 34%, #f4dfa4 0%, #e8c377 58%, #cd9f4e 100%);
  box-shadow:
    inset 0 0 .85em rgba(150, 100, 30, .5),
    inset 0 0 0 .12em rgba(214, 174, 96, .65);
}
.art--pappadam::after {
  content: "";
  position: absolute;
  left: 24%; top: 30%;
  width: 52%; height: 34%;
  border: 0 solid transparent;
  border-top: .16em solid rgba(120, 70, 15, .26);
  border-radius: 50%;
  transform: rotate(-9deg);
}

/* Banana chips — six curled coins */
.art--chips { width: 9.4em; height: 6.2em; }
.art--chips > i {
  width: 3em; height: 2.4em;
  border-radius: 52% 48% 55% 45% / 60% 55% 45% 50%;
  background:
    radial-gradient(30% 28% at 50% 52%, rgba(190, 140, 40, .38), transparent 72%),
    radial-gradient(62% 56% at 42% 38%, #f6de8d 0%, #ebc45b 56%, #d9a927 100%);
  box-shadow:
    inset 0 0 0 .13em rgba(173, 116, 22, .42),
    inset .1em .16em .3em rgba(255, 250, 220, .6),
    0 .16em .28em rgba(20, 40, 26, .28);
}
.art--chips > i::after {
  content: "";
  inset: 0;
  border-radius: inherit;
  background: inherit;
  box-shadow: inherit;
}
.art--chips i:nth-child(1) { display: block; left: 2%;  bottom: 8%;  transform: rotate(-14deg); }
.art--chips i:nth-child(1)::after { transform: translate(1.5em, -1.35em) rotate(22deg) scale(.94); }
.art--chips i:nth-child(2) { display: block; left: 34%; bottom: 4%;  transform: rotate(8deg); }
.art--chips i:nth-child(2)::after { transform: translate(1.1em, -1.55em) rotate(-20deg) scale(.9); }
.art--chips i:nth-child(3) { display: block; left: 65%; bottom: 10%; transform: rotate(-6deg); }
.art--chips i:nth-child(3)::after { transform: translate(-1.15em, -1.45em) rotate(32deg) scale(.88); }

/* Sharkara varatti — jaggery-lacquered chunks */
.art--sharkara { width: 8.2em; height: 5.8em; }
.art--sharkara > i {
  width: 2em; height: 1.75em;
  border-radius: 32% 38% 30% 36% / 36% 30% 40% 34%;
  background:
    radial-gradient(circle .12em at 28% 32%, rgba(240, 210, 130, .95) 0 .06em, transparent .11em) 0 0 / .68em .6em,
    radial-gradient(circle .09em at 65% 60%, rgba(224, 186, 105, .8) 0 .045em, transparent .09em) .2em .2em / .8em .7em,
    linear-gradient(155deg, #a5602e 0%, #7e4522 55%, #5c3115 100%);
  box-shadow:
    inset 0 .14em .2em rgba(244, 212, 138, .5),
    inset 0 -.2em .3em rgba(30, 14, 4, .5),
    0 .15em .26em rgba(15, 35, 22, .32);
}
.art--sharkara > i::after {
  content: "";
  inset: 0;
  border-radius: 38% 30% 36% 32% / 30% 40% 32% 38%;
  background: inherit;
  box-shadow: inherit;
}
.art--sharkara i:nth-child(1) { display: block; left: 10%; bottom: 10%; transform: rotate(-12deg); }
.art--sharkara i:nth-child(1)::after { transform: translate(1.35em, -.15em) rotate(26deg) scale(.92); }
.art--sharkara i:nth-child(2) { display: block; left: 48%; bottom: 8%;  transform: rotate(10deg); }
.art--sharkara i:nth-child(2)::after { transform: translate(.9em, -.3em) rotate(-18deg) scale(.88); }
.art--sharkara i:nth-child(3) { display: block; left: 30%; bottom: 34%; transform: rotate(4deg); }
.art--sharkara i:nth-child(3)::after { transform: translate(1.1em, .1em) rotate(30deg) scale(.85); }

/* Nendran banana — sweet and whole */
.art--banana { width: 8.2em; height: 4.9em; }
.art--banana::before {
  content: "";
  position: absolute;
  left: 7%; top: 32%;
  width: 82%; height: 44%;
  border-radius: 50% 50% 42% 58% / 100% 100% 20% 24%;
  background:
    repeating-linear-gradient(94deg, rgba(120, 80, 10, .13) 0 .1em, transparent .1em .95em),
    linear-gradient(180deg, #f5d563 0%, #e9b93d 55%, #c98f23 100%);
  transform: rotate(-9deg);
  box-shadow:
    inset 0 -.26em .4em rgba(120, 70, 10, .38),
    inset 0 .14em .22em rgba(255, 244, 190, .55),
    0 .2em .3em rgba(20, 40, 26, .3);
}
.art--banana > i { z-index: 2; }
.art--banana i:nth-child(1) { display: block; width: .8em; height: .62em; left: 2%; top: 44%;
  background: linear-gradient(140deg, #6b4a16, #3f2a0a); border-radius: 60% 40% 50% 50%; transform: rotate(-24deg); }
.art--banana i:nth-child(2) { display: block; width: .85em; height: .6em; right: 3%; top: 26%;
  background: linear-gradient(140deg, #7a5a1e, #4e3210); border-radius: 40% 60% 50% 50%; transform: rotate(18deg); }

/* ····· The heart of the feast ····· */

/* Rice — a generous steamed mound, grain by grain */
.art--rice { width: 12.8em; height: 8.4em; }
.art--rice::before {
  content: "";
  position: absolute; inset: 13% 5% 9%;
  border-radius: 50% 50% 45% 55% / 72% 76% 28% 30%;
  background:
    radial-gradient(.2em .09em at 30% 30%, rgba(255,255,255,.95) 40%, transparent 60%) 0 0 / .62em .46em,
    radial-gradient(.18em .08em at 70% 60%, rgba(232, 223, 195, .9) 40%, transparent 60%) .2em .15em / .74em .55em,
    radial-gradient(.16em .07em at 45% 80%, rgba(210, 200, 168, .8) 40%, transparent 60%) .35em .28em / .88em .66em,
    radial-gradient(92% 82% at 36% 24%, #fffdf4 0%, #f4edd8 55%, #ded4b4 100%);
  box-shadow:
    inset 0 -.95em 1.3em rgba(150, 135, 90, .4),
    inset 0 .3em .55em rgba(255, 255, 255, .75),
    0 .3em .5em rgba(15, 35, 22, .3);
}
.art--rice::after {
  content: "";
  position: absolute;
  right: 4%; top: 40%;
  width: 30%; height: 40%;
  border-radius: 52% 48% 50% 50% / 66% 70% 32% 34%;
  background:
    radial-gradient(.18em .08em at 40% 40%, rgba(255,255,255,.95) 40%, transparent 60%) 0 0 / .6em .45em,
    radial-gradient(88% 80% at 38% 26%, #fffdf4 0%, #f0e8d0 62%, #d8cdaa 100%);
  box-shadow: inset 0 -.4em .55em rgba(150, 135, 90, .38);
}

/* ····· Payasam — served in a broad brass uruli ····· */
.art--ada, .art--parippu-pay, .art--palada { width: 10.8em; height: 6.8em; }
.art--ada::before, .art--parippu-pay::before, .art--palada::before {
  content: "";
  position: absolute;
  left: 5%; right: 5%; top: 31%; bottom: 5%;
  border-radius: 11% 11% 50% 50% / 24% 24% 100% 100%;
  background: linear-gradient(180deg, #e9c873 0%, #b9862f 32%, var(--brass-low) 74%, var(--brass-deep) 100%);
  box-shadow:
    inset 0 -.55em .75em rgba(30, 14, 2, .5),
    inset 0 .14em .2em rgba(255, 244, 200, .6);
}
.art--ada::after, .art--parippu-pay::after, .art--palada::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 10.5%; right: 10.5%; top: 21%; height: 34%;
  border-radius: 50%;
  background: var(--liq);
  box-shadow:
    0 0 0 .2em var(--brass-mid),
    0 .1em 0 .26em rgba(122, 76, 18, .8),
    inset 0 .24em .48em rgba(40, 16, 2, .42),
    inset 0 -.12em .28em rgba(255, 255, 255, .18);
}
.art--ada > i, .art--parippu-pay > i, .art--palada > i { z-index: 2; }

/* Ada pradhaman — deep jaggery caramel */
.art--ada { --liq: radial-gradient(56% 52% at 40% 32%, #96552a, #7a4020 56%, #5c2e14 100%); }
.art--ada i:nth-child(1) { display: block; width: .8em; height: .5em; left: 30%; top: 30%;
  background: #d9c294; border-radius: 22%; transform: rotate(-14deg); opacity: .95; }
.art--ada i:nth-child(2) { display: block; width: .68em; height: .44em; left: 55%; top: 36%;
  background: #cdb583; border-radius: 24%; transform: rotate(20deg); }
.art--ada i:nth-child(3) { display: block; width: .5em; height: .38em; left: 44%; top: 26%;
  background: radial-gradient(circle at 35% 30%, #f0e0b6, #d8c188); border-radius: 50% 50% 50% 12%;
  transform: rotate(-30deg); box-shadow: .9em .35em 0 -.06em #3f2410; }

/* Parippu payasam — roasted moong gold */
.art--parippu-pay { --liq: radial-gradient(56% 52% at 40% 32%, #b06a28, #96551f 58%, #713e14 100%); }
.art--parippu-pay i:nth-child(1) { display: block; width: .34em; height: .26em; left: 33%; top: 33%;
  background: #d9a94f; border-radius: 50%;
  box-shadow: .8em .25em 0 0 #cf9c42, 1.6em -.1em 0 0 #d9a94f, .4em .7em 0 0 #c08f38; }
.art--parippu-pay i:nth-child(2) { display: block; width: .55em; height: .4em; left: 58%; top: 28%;
  background: radial-gradient(circle at 35% 30%, #f0e0b6, #d8c188); border-radius: 50% 50% 50% 14%;
  transform: rotate(24deg); }

/* Palada — pale, silken, faintly rose */
.art--palada { --liq:
  radial-gradient(60% 55% at 42% 32%, rgba(226, 160, 130, .18), transparent 70%),
  radial-gradient(60% 56% at 42% 32%, #f7ebd2, #f0debb 62%, #d9c095 100%); }
.art--palada i:nth-child(1) { display: block; width: .8em; height: .46em; left: 30%; top: 32%;
  background: rgba(255, 252, 240, .95); border-radius: 26%; transform: rotate(-10deg);
  box-shadow: 1.5em .3em 0 -.05em rgba(255, 252, 240, .85); }
.art--palada i:nth-child(2) { display: block; width: .5em; height: .38em; left: 52%; top: 26%;
  background: radial-gradient(circle at 35% 30%, #f2e4bd, #dcc48c); border-radius: 50% 50% 50% 14%;
  transform: rotate(30deg); box-shadow: -.9em .5em 0 -.08em #4e2812; }


/* ── 12. LAMP & POOKALAM ───────────────────────────────────────────────── */

/* Nilavilakku — base, stem, oil bowl, wick, flame, glow */
.lamp {
  position: relative;
  font-size: 10px;
  width: 7.2em; height: 17em;
  flex: none;
}
.lamp--small { font-size: 7px; }
.lamp > i { position: absolute; display: block; }

.lamp-base {
  bottom: 0; left: 8%;
  width: 84%; height: 1.7em;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass-mid) 45%, var(--brass-deep) 100%);
  box-shadow: 0 .3em .8em rgba(0, 0, 0, .45);
}
.lamp-base::before {
  content: "";
  position: absolute;
  left: 17%; bottom: 1.1em;
  width: 66%; height: 1.3em;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass-low));
}
.lamp-stem {
  bottom: 2.6em; left: 44%;
  width: 12%; height: 6.6em;
  background: linear-gradient(90deg, var(--brass-low), var(--brass-hi) 45%, #a5731f 75%, var(--brass-deep));
}
.lamp-stem::before {
  content: "";
  position: absolute;
  left: -75%; top: 42%;
  width: 250%; height: 1.15em;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass-low));
}
.lamp-bowl {
  bottom: 8.6em; left: 7%;
  width: 86%; height: 2.7em;
  border-radius: 12% 12% 50% 50% / 30% 30% 100% 100%;
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass-mid) 38%, var(--brass-low) 100%);
  box-shadow: inset 0 -.5em .6em rgba(40, 20, 2, .5);
}
.lamp-bowl::before {
  content: "";
  position: absolute;
  left: -3%; top: -.4em;
  width: 106%; height: .95em;
  border-radius: 50%;
  background: linear-gradient(180deg, #f6e2a8, var(--brass-mid) 80%);
}
.lamp-wick {
  bottom: 11.3em; left: 47%;
  width: 6%; height: .8em;
  background: var(--brown);
  border-radius: 40%;
}
.lamp-flame {
  bottom: 11.9em; left: 40.5%;
  width: 19%; height: 2.7em;
  border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  background: radial-gradient(50% 62% at 50% 72%, #fff6ce 0%, #f5c34a 46%, #e08a1f 76%, rgba(224, 138, 31, 0) 100%);
  transform-origin: 50% 92%;
  animation: flicker 2.8s ease-in-out infinite;
}
.lamp-glow {
  bottom: 10.4em; left: 50%;
  width: 9.5em; height: 9.5em;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 195, 74, .3), rgba(245, 195, 74, .09) 46%, transparent 70%);
  animation: glowPulse 3.6s ease-in-out infinite;
}

@keyframes flicker {
  0%, 100% { transform: scale(1); }
  26%      { transform: scaleY(1.07) rotate(-1.6deg); }
  52%      { transform: scale(.96) rotate(1.2deg); }
  78%      { transform: scaleY(1.04); }
}
@keyframes glowPulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

/* Pookalam — rings of conic petals */
.pookalam {
  position: relative;
  width: min(58vw, 270px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(214, 180, 90, .22);
  animation: pkSpin 90s linear infinite;
}
/* NB: nested insets must stay under 50% a side or the ring collapses to 0×0 */
.pk { position: absolute; border-radius: 50%; box-shadow: inset 0 3px 10px rgba(0, 0, 0, .22); }
.pk-r1 { inset: 0;   background: repeating-conic-gradient(from 0deg,  #9c382d 0deg 7.5deg,  #c24e2c 7.5deg 15deg); }
.pk-r2 { inset: 10%; background: repeating-conic-gradient(from 6deg,  #d99b27 0deg 9deg,    #e8b84b 9deg 18deg); }
.pk-r3 { inset: 20%; background: repeating-conic-gradient(from 0deg,  #f7f0d8 0deg 11.25deg,#e7d9a8 11.25deg 22.5deg); }
.pk-r4 { inset: 29%; background: repeating-conic-gradient(from 8deg,  #a95732 0deg 15deg,   #8a3a2a 15deg 30deg); }
.pk-r5 { inset: 37%; background: repeating-conic-gradient(from 0deg,  #6c9b58 0deg 20deg,   #4c7440 20deg 40deg); }
.pk-core {
  position: absolute; inset: 43%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #f6e7b0, var(--turmeric) 76%);
  box-shadow: 0 0 20px rgba(214, 180, 90, .55);
}
@keyframes pkSpin { to { transform: rotate(360deg); } }


/* ── 13. DISH PANEL ────────────────────────────────────────────────────── */

/* Overlays must stop catching clicks the instant they begin closing */
.scrim, .dish-panel, .moment { pointer-events: none; }
.scrim.is-shown, .dish-panel.is-shown, .moment.is-shown { pointer-events: auto; }

.scrim {
  position: fixed; inset: 0;
  z-index: 55;
  background: var(--scrim);
  opacity: 0;
  transition: opacity .4s ease;
}
.scrim.is-shown { opacity: 1; }

.dish-panel {
  position: fixed;
  z-index: 70;
  left: 50%; top: 50%;
  transform: translate(-50%, -48%);
  width: min(92vw, 380px);
  max-height: min(86vh, 640px);
  overflow-y: auto;
  padding: 2.1rem 2.2rem 2.3rem;
  background: linear-gradient(180deg, #0f3121, #0b2618);
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 0 6px rgba(214, 180, 90, .05);
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease, transform .35s var(--ease-settle);
}
.dish-panel.is-shown { opacity: 1; transform: translate(-50%, -50%); }

.panel-close {
  position: absolute;
  top: .7rem; right: .9rem;
  width: 2.2rem; height: 2.2rem;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(247, 240, 216, .6);
  transition: color .25s ease;
}
.panel-close:hover { color: var(--gold-warm); }

.panel-art-wrap {
  height: 84px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.panel-art-wrap .art { font-size: 7px; }

.panel-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: .04em;
  color: var(--rice);
}
.panel-ml { margin-top: .3rem; font-size: 1.05rem; color: var(--gold-warm); }
.panel-flavors { margin-top: .95rem; color: rgba(214, 180, 90, .85); }
.panel-desc {
  margin-top: .9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(247, 240, 216, .88);
}
.panel-note {
  margin-top: .8rem;
  font-size: .78rem;
  line-height: 1.6;
  color: rgba(247, 240, 216, .5);
}
.panel-note { padding-bottom: .4rem; }


/* ── 14. MOMENTS (rice · payasam unlock) ───────────────────────────────── */

.moment {
  position: fixed; inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 6vh 6vw;
  background: rgba(4, 14, 9, .82);
  opacity: 0;
  transition: opacity .5s ease;
}
.moment.is-shown { opacity: 1; }

.moment-inner { text-align: center; max-width: 34rem; }
.moment-kicker { color: rgba(214, 180, 90, .8); }
.moment-title {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  letter-spacing: .06em;
  color: var(--rice);
  text-shadow: 0 0 50px rgba(214, 180, 90, .3);
}
.moment-ml {
  margin-top: .7rem;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: var(--gold-warm);
}
.moment-line {
  margin-top: 1.3rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(247, 240, 216, .8);
}
.moment .btn-quiet { margin-top: 2.2rem; }

.moment.is-shown .moment-kicker,
.moment.is-shown .moment-title,
.moment.is-shown .moment-ml,
.moment.is-shown .moment-line,
.moment.is-shown .btn-quiet { animation: riseIn .8s var(--ease-soft) both; }
.moment.is-shown .moment-title { animation-delay: .1s; }
.moment.is-shown .moment-ml    { animation-delay: .22s; }
.moment.is-shown .moment-line  { animation-delay: .34s; }
.moment.is-shown .btn-quiet    { animation-delay: .5s; }


/* ── 15. FINALE & GOODBYE ──────────────────────────────────────────────── */

.stage-finale {
  display: grid;
  place-items: center;
  padding: 3vh 6vw;
  background:
    radial-gradient(90% 60% at 50% 24%, rgba(214, 180, 90, .13), transparent 60%),
    radial-gradient(130% 95% at 50% 0%, #1c4a30 0%, var(--green-900) 46%, var(--green-950) 100%);
}

.finale-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.7rem, 1.5vh, 1.2rem);
  text-align: center;
}

.pookalam--finale { width: min(40vw, 19vh, 175px); margin-bottom: .2rem; }

.finale-step {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
}
.finale-step.is-shown { opacity: 1; transform: none; }

.finale-ml {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.8vw, 2.4rem);
  color: var(--rice);
  text-shadow: 0 0 44px rgba(214, 180, 90, .35);
}
.finale-ml--small { font-size: clamp(1.2rem, 3vw, 1.7rem); color: var(--gold-warm); }
.finale-label { margin-top: .55rem; color: rgba(214, 180, 90, .85); }

/* The thank-you that closes the card */
.finale-thanks {
  margin-top: 1.1rem;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .26em;
  text-indent: .26em;
  font-size: .72rem;
  color: var(--rice);
}
.finale-memories {
  margin-top: .55rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .98rem;
  color: rgba(247, 240, 216, .72);
}

.finale-onam {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 6.4vw, 4.4rem);
  letter-spacing: .1em;
  color: var(--gold-warm);
  text-shadow: 0 0 70px rgba(214, 180, 90, .4);
}
.finale-from {
  margin-top: .4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(247, 240, 216, .85);
}

.finale-bless .bless-line {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(247, 240, 216, .8);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s ease, transform .7s ease;
}
.finale-bless .bless-word {
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--gold-warm);
  padding: .1rem 0;
}
.finale-bless.is-shown .bless-line { opacity: 1; transform: none; }
.finale-bless.is-shown .bless-line:nth-child(1) { transition-delay: 0s; }
.finale-bless.is-shown .bless-line:nth-child(2) { transition-delay: .55s; }
.finale-bless.is-shown .bless-line:nth-child(3) { transition-delay: 1.1s; }
.finale-bless.is-shown .bless-line:nth-child(4) { transition-delay: 1.65s; }
.finale-bless.is-shown .bless-line:nth-child(5) { transition-delay: 2.3s; }

.finale-lamps {
  display: flex;
  gap: clamp(3rem, 14vw, 9rem);
  margin-top: .3rem;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.finale-lamps .lamp--small { font-size: 5px; }
.finale-lamps.is-shown { opacity: 1; }

/* ── 16. TOAST & NOSCRIPT ──────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%; bottom: 4.5vh;
  transform: translate(-50%, 16px);
  z-index: 96;
  padding: .55rem 1.3rem;
  background: var(--cream);
  color: var(--green-900);
  font-family: var(--serif);
  font-style: italic;
  font-size: .92rem;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s var(--ease-settle);
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

.noscript {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--green-950);
  text-align: center;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 2;
}


/* ── 17. RESPONSIVE ────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .stage-feast { grid-template-columns: minmax(280px, 330px) 1fr; }
  .catalogue { padding: 1.5rem 1.2rem 3rem; }
}

@media (max-width: 860px) and (min-width: 768px) {
  .row-flavors { display: none; }
}

@media (max-width: 767px) {
  .stage-feast { display: block; }

  .leaf-stage {
    height: auto;
    min-height: calc(100vh - var(--topbar-h) - 7px);
    min-height: calc(100dvh - var(--topbar-h) - 7px);
    justify-content: center;
    gap: 2.2rem;
    padding: 3vh 4vw 7.5rem;
  }
  .leaf { width: 92vw; }

  /* Catalogue becomes a bottom sheet */
  .catalogue {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    z-index: 60;
    height: auto;
    max-height: 76vh;
    max-height: 76dvh;
    border-right: 0;
    border-top: 1px solid var(--line-gold-2);
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, #0e2f20, #0a2517);
    box-shadow: 0 -30px 70px rgba(0, 0, 0, .55);
    transform: translateY(106%);
    transition: transform .45s var(--ease-settle);
    padding-bottom: 3rem;
  }
  .catalogue.is-open { transform: none; }

  .catalogue-close {
    /* Pinned ✕ that rides along as the sheet scrolls */
    display: grid;
    place-items: center;
    position: sticky;
    top: .2rem;
    z-index: 5;
    margin: 0 0 -2.4rem auto;
    width: 2.4rem; height: 2.4rem;
    background: var(--green-950);
    border: 1px solid var(--line-gold-2);
    color: var(--gold-warm);
    font-size: 1rem;
    line-height: 1;
    border-radius: 50%;
  }

  .feast-bar {
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    padding: .9rem 1rem calc(.9rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(0deg, rgba(8, 27, 20, .96) 60%, rgba(8, 27, 20, 0));
  }
  .btn-menu-fab {
    padding: .9rem 2.2rem;
    border: 1px solid var(--gold-warm);
    background: rgba(8, 27, 20, .8);
    color: var(--gold-warm);
    font-size: .7rem;
    letter-spacing: .28em;
    text-indent: .14em;
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  }

  .dish-panel {
    left: 0; right: 0; top: auto; bottom: 0;
    width: auto;
    max-height: 78vh;
    max-height: 78dvh;
    transform: translateY(30px);
    border-radius: 18px 18px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .dish-panel.is-shown { transform: none; }

  .toast { bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: 88vw; }

  .welcome-inner { flex-direction: column; align-items: center; gap: 2.4rem; }
  .lamp--right { display: none; }
  .lamp { font-size: 7px; }
  .topbar-progress .tp-label { display: none; }
}

@media (max-width: 420px) {
  /* The centered progress counter needs the width the right label occupies */
  body[data-stage="feast"] .topbar-place { display: none; }
  .cat-row { grid-template-columns: 56px 1fr auto; gap: .7rem; }
  .cat-mini { width: 56px; height: 48px; }
  .cat-mini .art { font-size: 3.5px; }
  .btn-add { padding: .45rem .7rem; }
  .topbar { padding: 0 1rem; }
}


/* ── 18. REDUCED MOTION ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .petal, .amb-pookalam { display: none; }
  .pookalam, .lamp-flame, .lamp-glow { animation: none !important; }
  .finale-step, .finale-bless .bless-line, .finale-lamps { transition: none; }
}