@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/Baloo2-devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/Baloo2-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Yatra One'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/YatraOne-devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: 'Yatra One'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Diwali Ki Deewar — design tokens from README#design */
:root {
  --night: #1C1240; --night-2: #261858; --night-3: #33206f;
  --marigold: #F6A21E; --flame: #FF6A2B; --kumkum: #D6246E; --peacock: #0FA3A3;
  --clay: #7A4A2E; --cream: #FFF6E5; --muted: #c9bfe6; --leaf: #2e8b3d;
  --display: 'Yatra One', system-ui, sans-serif;
  --body: 'Baloo 2', system-ui, sans-serif;
  --r: 16px;
  --unlit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 21h28c-1 7-7 11-14 11S7 28 6 21z' fill='%237A4A2E'/%3E%3Cpath d='M6 21h28' stroke='%23A8703F' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M15 31h10l-1 3h-8z' fill='%235e3720'/%3E%3Cpath d='M20 21v-3' stroke='%23463022' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFC24A' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23FF6A2B' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='f' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23FF6A2B'/%3E%3Cstop offset='.6' stop-color='%23F6A21E'/%3E%3Cstop offset='1' stop-color='%23FFF6E5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='15' r='14' fill='url(%23g)'/%3E%3Cpath d='M20 5c3 5 5 8 3 12-1 2-5 2-6 0-2-4 0-7 3-12z' fill='url(%23f)'/%3E%3Cpath d='M6 21h28c-1 7-7 11-14 11S7 28 6 21z' fill='%23A8582E'/%3E%3Cpath d='M6 21h28' stroke='%23F6A21E' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M15 31h10l-1 3h-8z' fill='%237A4A2E'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--body); color: var(--cream); background: var(--night);
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 9%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 6%, #ffe9b8aa 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 30%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 22%, #fff4 50%, transparent 51%),
    radial-gradient(60% 50% at 50% 115%, #d6246e40, transparent 70%),
    radial-gradient(40% 40% at 0% 0%, #0fa3a322, transparent 70%),
    radial-gradient(40% 40% at 100% 10%, #f6a21e1c, transparent 70%);
  background-attachment: fixed; min-height: 100dvh; line-height: 1.45;
}
a { color: var(--peacock); }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Toran — marigold garland with mango leaves */
.toran {
  height: 26px; pointer-events: none;
  background:
    radial-gradient(circle at 50% 3px, #2e8b3d 0 3px, transparent 3.5px) 0 0 / 28px 26px repeat-x,
    radial-gradient(circle at 50% 12px, #FFD54A 0 3px, #F6A21E 3.5px 7px, #e07b12 7.5px 8px, transparent 8.5px) 0 0 / 28px 26px repeat-x,
    radial-gradient(circle at 50% 12px, #FFB04A 0 3px, #FF6A2B 3.5px 7px, #c9461a 7.5px 8px, transparent 8.5px) 14px 0 / 28px 26px repeat-x,
    linear-gradient(#5a3a1a, #5a3a1a) 0 3px / 100% 1.5px no-repeat;
  filter: drop-shadow(0 3px 4px #0006);
}
.toran.leaves::after {
  content: ''; display: block; height: 14px; margin-top: -6px;
  background: conic-gradient(from 150deg at 50% 0, transparent 0 0deg, #3aa04a 0 60deg, transparent 60deg) 7px 0 / 56px 14px repeat-x;
  opacity: .9;
}

/* Top bar */
.topbar {
  display: flex; align-items: center; gap: 16px; padding: 10px clamp(12px, 3vw, 28px) 6px;
  position: relative; z-index: 2;
}
.wordmark { font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 2rem); color: var(--marigold); text-decoration: none; white-space: nowrap;
  text-shadow: 0 0 18px #f6a21e66, 0 2px 0 #7a2a10; letter-spacing: .5px; display: flex; align-items: center; gap: 8px; }
.wordmark svg { width: 1.3em; height: 1.3em; flex: none; }
.counter { margin-left: auto; text-align: right; }
.counter strong { font-family: var(--display); font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--cream); }
.counter span { color: var(--muted); font-size: .95rem; }
.meter { height: 4px; width: min(220px, 40vw); margin: 4px 0 0 auto; border-radius: 4px; background: #ffffff14; overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--kumkum), var(--flame), var(--marigold)); border-radius: inherit; }

.btn {
  font: 600 1rem/1 var(--body); border: 0; cursor: pointer; border-radius: 999px; padding: 12px 20px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center; transition: transform .15s, background .15s, box-shadow .15s;
}
.btn-primary { background: linear-gradient(180deg, #ffbb3d, var(--marigold)); color: #3a1606; box-shadow: 0 0 0 2px #ffd78a55 inset, 0 6px 22px #f6a21e55; }
.btn-primary:hover { background: linear-gradient(180deg, #ff9257, var(--flame)); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 28px #ff6a2b77; }
.btn-ghost { background: #ffffff12; color: var(--cream); box-shadow: 0 0 0 1px #ffffff26 inset; }
.btn-ghost:hover { background: #ffffff22; }
.btn-peacock { background: var(--peacock); color: #fff; }
.btn-peacock:hover { background: #12b9b9; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* Wall */
.stage { padding: 6px clamp(8px, 2.5vw, 28px) 10px; }
.wall-scroll { overflow: auto; border-radius: 22px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.wall-frame {
  --cell: min(calc((100vw - 2 * clamp(8px, 2.5vw, 28px) - 28px) / 48), calc((100dvh - 178px) / 30));
  width: max-content; margin: 0 auto; padding: 12px; border-radius: 22px; position: relative;
  background: linear-gradient(160deg, #2b1a63, #1f1450 60%, #2a1350);
  box-shadow: 0 0 0 2px #f6a21e55, 0 0 0 7px var(--night), 0 0 0 9px #d6246e66, 0 20px 60px #0009, inset 0 0 60px #0006;
}
.wall-frame.zoomed { --cell: 30px; }
.wall {
  display: grid; position: relative; grid-template-columns: repeat(var(--cols, 48), var(--cell)); grid-template-rows: repeat(var(--rows, 30), var(--cell));
  background: var(--unlit) 0 0 / var(--cell) var(--cell); cursor: pointer; touch-action: manipulation;
}
.wall.reveal { background-image: var(--lit); }
.wall.reveal::before { content: ''; position: absolute; inset: 0; background: var(--lit) 0 0 / var(--cell) var(--cell); animation: shimmer 3.2s ease-in-out infinite alternate; pointer-events: none; mix-blend-mode: screen; opacity: .0; }
.zone { grid-area: var(--za); border-radius: 18px; pointer-events: none;
  background: radial-gradient(closest-side, #f6a21e1f, #d6246e10 70%, transparent);
  box-shadow: inset 0 0 0 1px #f6a21e30; }
.zone::after { content: 'centre ring'; position: absolute; transform: translateY(-1.3em); font-size: .72rem; color: #f6a21e88; padding-left: 10px; }

.tile {
  all: unset; position: relative; cursor: pointer; container-type: size; border-radius: 18%; z-index: 1;
  background: radial-gradient(circle at 50% 42%, #ffcb6a55, #ff6a2b22 48%, transparent 72%), linear-gradient(170deg, #3b2577, #2a1858);
  box-shadow: inset 0 0 0 1px #f6a21e66, 0 0 14px #f6a21e33;
  margin: 1px; animation: ignite .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0s);
  transition: transform .18s, box-shadow .18s;
}
.tile:hover, .tile:focus-visible { transform: scale(1.06); z-index: 3; box-shadow: inset 0 0 0 1.5px var(--flame), 0 0 26px #ff6a2b88; outline: none; }
.tile .flame {
  position: absolute; left: 50%; top: 3%; width: 22cqmin; height: 30cqmin; translate: -50% 0;
  background: radial-gradient(ellipse at 50% 72%, #fff6e5 0 18%, #ffd25e 30%, var(--marigold) 50%, var(--flame) 70%, transparent 72%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; filter: drop-shadow(0 0 4cqmin #ffb13b);
  transform-origin: 50% 90%; animation: flicker 2.6s ease-in-out infinite alternate; animation-delay: var(--f, 0s);
}
.tile .disc {
  position: absolute; left: 50%; top: 56%; width: 54cqmin; height: 54cqmin; translate: -50% -50%; border-radius: 50%;
  background: var(--cream); box-shadow: 0 0 0 max(1px, 2.5cqmin) var(--marigold), 0 0 10cqmin #f6a21e99; overflow: hidden; display: grid; place-items: center;
}
.tile .disc img { width: 82%; height: 82%; object-fit: contain; }
.tile .disc b { font: 700 22cqmin/1 var(--display); color: var(--kumkum); }
.tile .bowl { position: absolute; left: 50%; bottom: 4%; width: 76cqmin; height: 18cqmin; translate: -50% 0;
  background: linear-gradient(#c56a2e, var(--clay)); border-radius: 0 0 50% 50% / 0 0 100% 100%; z-index: -1; box-shadow: 0 -1px 0 var(--marigold); }
.tile .name { display: none; }
@container (min-width: 84px) {
  .tile .disc { top: 50%; width: 48cqmin; height: 48cqmin; }
  .tile .name { display: block; position: absolute; inset: auto 6% 5% 6%; text-align: center; font: 600 clamp(.62rem, 11cqmin, .95rem)/1.1 var(--body);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cream); text-shadow: 0 1px 2px #000a; }
  .tile .bowl { bottom: 17%; }
}
.tile.akhand { background: radial-gradient(circle at 50% 42%, #ffcb6a66, #d6246e44 50%, transparent 75%), linear-gradient(160deg, #5a1650, #2e1460);
  box-shadow: inset 0 0 0 2px var(--kumkum), inset 0 0 0 5px #f6a21e55, 0 0 30px #d6246e77; }
.tile.akhand .disc { box-shadow: 0 0 0 2.5cqmin var(--kumkum), 0 0 0 4.5cqmin var(--marigold), 0 0 14cqmin #ff6a2baa; }
.tile.akhand::before { content: ''; position: absolute; inset: 3%; border-radius: 16%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, #f6a21e22 0 6deg, transparent 6deg 15deg); mask: radial-gradient(circle, transparent 46%, #000 47%); }

.cursor-cell { position: absolute; pointer-events: none; border-radius: 6px; box-shadow: 0 0 0 2px var(--marigold), 0 0 18px #f6a21e; display: none; z-index: 4; }
.cursor-cell.bad { box-shadow: 0 0 0 2px var(--kumkum), 0 0 18px var(--kumkum); }
.held { background: repeating-linear-gradient(45deg, #ffffff10 0 4px, transparent 4px 8px); border-radius: 6px; box-shadow: inset 0 0 0 1px #ffffff22; pointer-events: none; }

.reveal-banner { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 5; }
.reveal-banner span { font: 400 clamp(2rem, 7vw, 5.5rem)/1 var(--display); color: var(--cream); padding: .3em .8em; border-radius: 999px;
  background: radial-gradient(closest-side, #1c1240dd, #1c124088 70%, transparent); text-shadow: 0 0 30px var(--marigold), 0 0 60px var(--flame); }

@keyframes ignite { from { opacity: 0; filter: brightness(.3) saturate(0); transform: scale(.85); } 60% { filter: brightness(1.5); } to { opacity: 1; filter: none; transform: none; } }
@keyframes flicker { 0% { transform: scale(1, 1) rotate(-1.5deg); opacity: .95; } 50% { transform: scale(.94, 1.06) rotate(1deg); } 100% { transform: scale(1.03, .96) rotate(2deg); opacity: 1; } }
@keyframes shimmer { to { opacity: .55; } }

/* Footer */
.footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 6px clamp(12px, 3vw, 28px) 14px; color: var(--muted); font-size: .95rem; }
.footer button, .footer a { all: unset; cursor: pointer; color: var(--cream); opacity: .85; }
.footer button:hover, .footer a:hover { color: var(--marigold); opacity: 1; }
.footer .sep { opacity: .35; }
.footer .right { margin-left: auto; font-family: var(--display); color: var(--marigold); }
.footer .zoom-btn { display: none; }

/* Sheets & dialogs */
.scrim { position: fixed; inset: 0; background: #0b0620aa; backdrop-filter: blur(3px); z-index: 20; opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 21; top: 0; right: 0; height: 100dvh; width: min(420px, 100vw); overflow: auto;
  background: linear-gradient(180deg, #2c1b66, #1c1240 70%); box-shadow: -20px 0 60px #0009; border-left: 1px solid #f6a21e44;
  transform: translateX(105%); transition: transform .25s cubic-bezier(.2,.8,.2,1); padding: 0 22px 28px;
}
.sheet.open { transform: none; }
.sheet-head { display: flex; justify-content: flex-end; position: sticky; top: 0; padding: 14px 0 4px; background: inherit; }
.close { all: unset; cursor: pointer; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #ffffff14; font-size: 1.4rem; }
.close:hover { background: #ffffff26; }
.deal-logo { width: 120px; height: 120px; border-radius: 50%; margin: 6px auto 14px; background: var(--cream); display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 4px var(--marigold), 0 0 40px #f6a21e88; }
.deal-logo img { width: 80%; height: 80%; object-fit: contain; }
.deal h2 { font: 400 1.8rem/1.15 var(--display); text-align: center; margin: 0; color: var(--cream); }
.deal .tagline { text-align: center; color: var(--muted); margin: 4px 0 12px; }
.chip { display: inline-block; padding: 3px 12px; border-radius: 999px; background: #0fa3a326; color: #7fe3e3; font-size: .85rem; }
.offer { margin: 18px 0; padding: 16px 18px; border-radius: var(--r); background: linear-gradient(135deg, #d6246e33, #ff6a2b26); border: 1px dashed #f6a21e88; font-size: 1.15rem; font-weight: 600; }
.code-row { display: flex; gap: 10px; align-items: stretch; margin: 12px 0; }
.code { flex: 1; font: 700 1.25rem/1 ui-monospace, monospace; letter-spacing: 2px; padding: 14px; border-radius: 12px; background: #00000040; border: 1px dashed var(--peacock); text-align: center; color: #9ff; }
.deal .actions { display: grid; gap: 10px; margin-top: 16px; }
.small { font-size: .82rem; color: var(--muted); }

dialog { border: 0; padding: 0; border-radius: 22px; background: linear-gradient(180deg, #2c1b66, #1c1240); color: var(--cream); width: min(560px, 94vw); box-shadow: 0 30px 80px #000c, 0 0 0 1px #f6a21e44; }
dialog::backdrop { background: #0b0620bb; backdrop-filter: blur(3px); }
dialog .inner { padding: 24px 26px 26px; }
dialog h2 { font: 400 1.7rem/1.2 var(--display); color: var(--marigold); margin: 0 0 10px; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; }
.steps li::before { content: counter(s); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--marigold); color: #3a1606; display: grid; place-items: center; font-weight: 700; }

/* Deals list */
.list-head { position: sticky; top: 0; padding: 14px 0 10px; background: inherit; z-index: 1; }
.list-head h2 { font: 400 1.6rem var(--display); color: var(--marigold); margin: 0 0 8px; }
.search { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #ffffff26; background: #00000033; color: var(--cream); font: inherit; }
.filters { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; }
.filters button { all: unset; cursor: pointer; white-space: nowrap; padding: 5px 12px; border-radius: 999px; background: #ffffff12; font-size: .88rem; }
.filters button[aria-pressed="true"] { background: var(--marigold); color: #3a1606; font-weight: 600; }
.deal-item { all: unset; box-sizing: border-box; cursor: pointer; display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px; border-radius: 14px; margin: 6px 0; background: #ffffff0a; }
.deal-item:hover { background: #ffffff16; }
.deal-item .dl { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--cream); display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 2px var(--marigold); }
.deal-item .dl img { width: 80%; height: 80%; object-fit: contain; }
.deal-item b { display: block; }
.deal-item span { font-size: .9rem; color: var(--muted); display: block; }
.empty { text-align: center; color: var(--muted); padding: 30px 10px; }

.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 40; background: var(--cream); color: var(--night); padding: 10px 18px; border-radius: 999px; font-weight: 600;
  box-shadow: 0 10px 30px #0008; opacity: 0; transition: opacity .2s, transform .2s; transform: translateY(10px); pointer-events: none; }
.toast.show { opacity: 1; transform: none; }

.spot-pop { position: absolute; z-index: 6; translate: -50% calc(-100% - 10px); background: var(--cream); color: var(--night); border-radius: 14px; padding: 10px 12px; box-shadow: 0 10px 30px #000a; white-space: nowrap; font-size: .9rem; }
.spot-pop .btn { padding: 8px 14px; font-size: .9rem; margin-top: 6px; width: 100%; }

/* Mobile */
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: 6px 12px; }
  .topbar .btn-primary { order: 3; width: 100%; }
  .counter { margin-left: auto; }
  .wall-frame { --cell: calc((100vw - 16px - 16px) / 48); padding: 6px; }
  .wall-frame.zoomed { --cell: 26px; }
  .footer .zoom-btn { display: inline; }
  .sheet { top: auto; bottom: 0; height: auto; max-height: 86dvh; width: 100vw; border-left: 0; border-top: 1px solid #f6a21e55; border-radius: 22px 22px 0 0; transform: translateY(105%); }
  .zone::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Buy flow ---------- */
.buy-wrap { max-width: 1180px; margin: 0 auto; padding: 4px clamp(12px, 3vw, 28px) 40px; }
.stepper { display: flex; gap: 6px; list-style: none; padding: 0; margin: 6px 0 18px; flex-wrap: wrap; }
.stepper li { padding: 6px 14px; border-radius: 999px; background: #ffffff10; color: var(--muted); font-size: .92rem; }
.stepper li.on { background: var(--marigold); color: #3a1606; font-weight: 700; }
.stepper li.done { background: #0fa3a333; color: #9ff; }
.panel { background: linear-gradient(170deg, #2a1a62cc, #1f1450cc); border-radius: 22px; padding: clamp(16px, 3vw, 28px); box-shadow: 0 0 0 1px #f6a21e33, 0 20px 50px #0007; }
.panel h1 { font: 400 clamp(1.6rem, 3.5vw, 2.4rem)/1.15 var(--display); color: var(--marigold); margin: 0 0 4px; }
.panel .lede { color: var(--muted); margin: 0 0 18px; }
.eb { display: inline-block; background: linear-gradient(90deg, var(--kumkum), var(--flame)); color: #fff; border-radius: 999px; padding: 4px 14px; font-weight: 600; font-size: .9rem; margin-bottom: 14px; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tier-card { all: unset; box-sizing: border-box; cursor: pointer; border-radius: 18px; padding: 16px; background: #ffffff0b; box-shadow: inset 0 0 0 1px #ffffff1f; display: flex; flex-direction: column; gap: 6px; transition: transform .15s, box-shadow .15s; }
.tier-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--marigold), 0 10px 30px #f6a21e22; }
.tier-card[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--marigold), 0 0 30px #f6a21e44; background: #f6a21e14; }
.tier-card.akhand[aria-pressed="true"], .tier-card.akhand:hover { box-shadow: inset 0 0 0 2px var(--kumkum), 0 0 30px #d6246e55; }
.tier-card[disabled] { opacity: .45; cursor: not-allowed; }
.tier-card .mini { height: 74px; display: grid; place-items: end center; }
.tier-card .mini i { display: block; width: var(--s); height: var(--s); background: var(--lit) center / contain no-repeat; filter: drop-shadow(0 0 10px #f6a21e88); }
.tier-card h3 { margin: 4px 0 0; font: 400 1.3rem var(--display); color: var(--cream); }
.tier-card .dims { color: var(--muted); font-size: .88rem; }
.price { font-size: 1.35rem; font-weight: 700; color: var(--marigold); }
.price s { color: var(--muted); font-weight: 400; font-size: .95rem; margin-left: 6px; }
.left-badge { align-self: flex-start; background: var(--kumkum); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 600; }
.row-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: .88rem; margin: 6px 0 12px; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }
.place-frame { --cell: min(calc((min(1180px, 100vw) - 2 * clamp(12px, 3vw, 28px) - 2 * clamp(16px, 3vw, 28px) - 24px) / 48), 24px); }
@media (max-width: 760px) { .place-frame { --cell: 22px; } }
.hold-bar { display: flex; align-items: center; gap: 10px; background: #0fa3a322; border: 1px solid #0fa3a366; border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; }
.hold-bar b { font-variant-numeric: tabular-nums; color: #9ff; }
.form-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; }
@media (max-width: 860px) { .form-grid { grid-template-columns: 1fr; } }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.fields .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }
label { display: grid; gap: 4px; font-size: .92rem; color: var(--muted); }
label .opt { opacity: .7; font-size: .8rem; }
input, select, textarea { font: inherit; color: var(--cream); background: #0000003a; border: 1px solid #ffffff2a; border-radius: 12px; padding: 11px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--marigold); outline: none; box-shadow: 0 0 0 3px #f6a21e33; }
select option { background: var(--night); }
.check { display: flex; gap: 10px; align-items: flex-start; color: var(--cream); }
.check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--marigold); }
.fieldset-title { grid-column: 1 / -1; margin: 10px 0 0; font: 400 1.15rem var(--display); color: var(--marigold); }
.preview-card { position: sticky; top: 16px; align-self: start; text-align: center; }
.preview-card .ptile { width: 180px; height: 180px; margin: 6px auto 12px; }
.summary { margin-top: 14px; text-align: left; background: #00000030; border-radius: 14px; padding: 12px 14px; font-size: .95rem; }
.summary div { display: flex; justify-content: space-between; padding: 3px 0; }
.summary .total { border-top: 1px dashed #ffffff33; margin-top: 6px; padding-top: 8px; font-weight: 700; font-size: 1.1rem; color: var(--marigold); }
.error { background: #d6246e2e; border: 1px solid #d6246e88; color: #ffd0e2; padding: 10px 14px; border-radius: 12px; margin: 10px 0; }
.success { text-align: center; padding: 20px 0; }
.success .big-diya { width: 120px; height: 120px; margin: 0 auto; background: var(--lit) center / contain no-repeat; filter: drop-shadow(0 0 30px var(--marigold)); }

/* Legal pages */
.prose { max-width: 760px; margin: 0 auto; padding: 10px clamp(16px, 4vw, 28px) 50px; }
.prose h1 { font: 400 2.2rem var(--display); color: var(--marigold); }
.prose h2 { font: 400 1.3rem var(--display); color: var(--cream); margin-top: 28px; }
.prose p, .prose li { color: #e9e2fb; }

/* Admin */
.admin table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin td, .admin th { padding: 10px 8px; border-bottom: 1px solid #ffffff1a; vertical-align: top; text-align: left; }
.admin img { width: 56px; height: 56px; object-fit: contain; background: var(--cream); border-radius: 10px; }
.admin .btn { padding: 8px 12px; font-size: .88rem; }
.stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 18px; }
.stats div { background: #ffffff10; border-radius: 14px; padding: 10px 14px; }
.flag { color: #fff; background: var(--kumkum); border-radius: 6px; padding: 1px 6px; font-size: .78rem; }

/* ================= Festive layer v2 ================= */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --rv { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

body {
  background-color: #150d33;
  background-image:
    radial-gradient(70% 55% at 50% 118%, #d6246e55, transparent 70%),
    radial-gradient(45% 40% at -5% 0%, #0fa3a330, transparent 70%),
    radial-gradient(45% 40% at 105% 5%, #f6a21e26, transparent 70%),
    radial-gradient(120% 80% at 50% 0%, #2a1a66, #150d33 70%);
}
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; }
.topbar, .stage, .footer, main, .buy-wrap, .prose { position: relative; z-index: 2; }

/* Toran v2 — SVG garland swags (set by festive.js) */
.toran { height: 46px; background: var(--toran) 0 0 / 132px 64px repeat-x; position: relative; z-index: 3; filter: drop-shadow(0 4px 6px #0008);
  animation: toranIn 1s cubic-bezier(.2,.9,.3,1.2) both; transform-origin: top; }
.toran.leaves::after { display: none; }
.toran + .topbar { margin-top: -14px; }
@keyframes toranIn { from { transform: translateY(-60px); opacity: 0; } }

/* Hanging akash kandils */
.kandil { position: absolute; top: -18px; width: 46px; pointer-events: none; transform-origin: 50% 0; animation: swing 4.5s ease-in-out infinite alternate; filter: drop-shadow(0 0 14px var(--kg, #f6a21e99)); z-index: 0; }
.kandil svg { display: block; width: 100%; height: auto; }
.kandil.k1 { left: 30%; width: 40px; --kg: #d6246eaa; animation-delay: -1s; }
.kandil.k2 { left: 41%; width: 50px; top: -8px; animation-duration: 5.2s; }
.kandil.k3 { left: 55%; width: 38px; --kg: #0fa3a3aa; animation-delay: -2.2s; }
.kandil.k4 { left: 66%; width: 46px; top: -12px; --kg: #ff6a2baa; animation-duration: 3.9s; }
@keyframes swing { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@media (max-width: 900px) { .kandil.k1, .kandil.k4 { display: none; } .kandil.k2 { left: 52%; } .kandil.k3 { left: 70%; } }
@media (max-width: 560px) { .kandil { display: none; } }

/* Sky lanterns drifting up */
.lanterns { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.lanterns span { position: absolute; bottom: -80px; width: calc(34px * var(--s)); animation: rise linear infinite; filter: drop-shadow(0 0 10px #ff8a3a) drop-shadow(0 0 22px #ff6a2b66); opacity: .85; }
.lanterns svg { display: block; width: 100%; animation: sway 6s ease-in-out infinite alternate; }
@keyframes rise { from { transform: translateY(0); opacity: 0; } 8% { opacity: .9; } 85% { opacity: .7; } to { transform: translateY(calc(-100vh - 140px)); opacity: 0; } }
@keyframes sway { from { transform: translateX(-14px) rotate(-5deg); } to { transform: translateX(14px) rotate(5deg); } }

/* Wordmark shimmer + Devanagari */
.wordmark { flex-direction: row; }
.wordmark .wm { display: flex; flex-direction: column; line-height: 1; }
.wordmark .wm-en { background: linear-gradient(100deg, #F6A21E 0%, #FFD54A 20%, #FFF6E5 30%, #FFD54A 40%, #FF6A2B 60%, #F6A21E 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer-text 6s linear infinite; text-shadow: none; filter: drop-shadow(0 0 14px #f6a21e55) drop-shadow(0 2px 0 #7a2a10); }
.wordmark .wm-hi { font: 400 .5em/1.3 var(--display); color: #ff8fc0; letter-spacing: 1px; filter: none; text-shadow: 0 0 10px #d6246e88; }
.wordmark svg { animation: bob 3s ease-in-out infinite alternate; }
@keyframes shimmer-text { to { background-position: -250% 0; } }
@keyframes bob { to { transform: translateY(-3px) rotate(3deg); } }

.countdown { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-weight: 600; font-size: .9rem; white-space: nowrap;
  background: linear-gradient(90deg, #d6246e44, #ff6a2b44); box-shadow: inset 0 0 0 1px #ff8fc066; color: #ffe0ee; }
.counter strong { background: linear-gradient(180deg, #FFF6E5, #FFD54A); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-variant-numeric: tabular-nums; }
.meter { height: 6px; position: relative; overflow: visible; background: #ffffff14; }
.meter i { position: relative; background: linear-gradient(90deg, var(--kumkum), var(--flame), var(--marigold), #FFD54A); background-size: 200% 100%; animation: flow 3s linear infinite; transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.meter i::after { content: ''; position: absolute; right: -4px; top: 50%; width: 12px; height: 12px; translate: 0 -50%; border-radius: 50%; background: radial-gradient(#FFF6E5, #FFD54A 40%, transparent 70%); box-shadow: 0 0 12px 4px #f6a21e; }
@keyframes flow { to { background-position: -200% 0; } }

/* CTA: glowing, with a light sweep */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #ffffffaa 50%, transparent 70%); transform: translateX(-120%); animation: sweep 3.8s ease-in-out infinite; }
#cta { animation: pulseGlow 2.6s ease-in-out infinite; }
@keyframes sweep { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes pulseGlow { 50% { box-shadow: 0 0 0 2px #ffd78a55 inset, 0 0 34px #f6a21eaa, 0 0 70px #ff6a2b55; } }

/* Wall frame: translucent so the sky glows through; ornate double border */
.wall-frame { background: linear-gradient(160deg, #2b1a63e6, #1f1450e0 60%, #2a1350e6);
  box-shadow: 0 0 0 2px #f6a21e88, 0 0 0 6px #150d33, 0 0 0 8px #d6246e99, 0 0 0 12px #150d33, 0 0 0 13px #0fa3a366, 0 0 60px #f6a21e33, 0 30px 80px #000a, inset 0 0 80px #0008;
  animation: frameIn .9s .1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes frameIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.corner { position: absolute; width: 110px; height: 110px; pointer-events: none; z-index: 0; opacity: .9; }
.corner svg { width: 100%; height: 100%; animation: spin 90s linear infinite; }
.corner.tl { left: -55px; top: -55px; } .corner.tr { right: -55px; top: -55px; } .corner.bl { left: -55px; bottom: -55px; } .corner.br { right: -55px; bottom: -55px; }
.wall-scroll { overflow: visible; }
@media (max-width: 760px) { .wall-scroll { overflow: auto; } .corner { width: 60px; height: 60px; } .corner.tl, .corner.bl { left: -24px; } .corner.tr, .corner.br { right: -24px; } .corner.tl, .corner.tr { top: -24px; } .corner.bl, .corner.br { bottom: -24px; } }
.wall-frame.zoomed ~ * .corner, .wall-frame.zoomed .corner { display: none; }

/* Unlit diya v2 — clay with rangoli dots */
:root {
  --unlit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a3633a'/%3E%3Cstop offset='1' stop-color='%235e3720'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6 21h28c-1 7-7 11-14 11S7 28 6 21z' fill='url(%23c)'/%3E%3Cpath d='M30 21l6-3' stroke='%238a5230' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M6 21h28' stroke='%23c88a52' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='25.5' r='1' fill='%23f6c78a' opacity='.7'/%3E%3Ccircle cx='20' cy='27' r='1' fill='%23f6c78a' opacity='.7'/%3E%3Ccircle cx='26' cy='25.5' r='1' fill='%23f6c78a' opacity='.7'/%3E%3Cpath d='M34 18v-2' stroke='%23463022' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.wall { background-size: var(--cell) var(--cell); }

/* "Wishing" — random unlit diyas flicker briefly as if asking to be lit */
.wish { pointer-events: none; position: relative; z-index: 1; }
.wish::before { content: ''; position: absolute; left: 85%; top: 2%; width: 34%; height: 42%; translate: -50% 0; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%, #fff6e5 0 15%, #ffd25e 30%, var(--marigold) 50%, var(--flame) 70%, transparent 72%); filter: drop-shadow(0 0 5px #ffb13b);
  animation: wish 2.4s ease-in-out both; transform-origin: 50% 90%; }
@keyframes wish { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 70% { transform: scale(.9, 1.05); opacity: .9; } 100% { transform: scale(0); opacity: 0; } }

/* Lit tile v2: halo, two-layer flame, sparks, animated borders */
.tile { overflow: visible; background: radial-gradient(circle at 50% 40%, #ffcb6a66, #ff6a2b2a 48%, transparent 72%), linear-gradient(170deg, #432a86, #2a1858); }
.tile::after { content: ''; position: absolute; left: 50%; top: 18%; width: 90cqmin; height: 90cqmin; translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, #ffb13b66, #ff6a2b22 45%, transparent 70%); animation: breathe 3.2s ease-in-out infinite alternate; animation-delay: var(--f, 0s); }
.tile .flame::after { content: ''; position: absolute; left: 50%; bottom: 10%; width: 38%; height: 45%; translate: -50% 0; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 50% 70%, #ffffff, #bfe8ff 40%, transparent 70%); opacity: .85; }
.tile .flame { animation: flicker2 1.8s ease-in-out infinite; animation-delay: var(--f, 0s); }
.tile:hover .flame { animation-duration: .6s; height: 38cqmin; filter: drop-shadow(0 0 7cqmin #ffb13b) brightness(1.15); }
.tile .spark { position: absolute; left: 50%; top: 10%; width: 4cqmin; height: 4cqmin; min-width: 2px; min-height: 2px; border-radius: 50%; background: #FFD54A; box-shadow: 0 0 4px #ffb13b; opacity: 0; pointer-events: none; animation: spark 2.6s ease-out infinite; }
.tile .spark:nth-of-type(2) { animation-delay: .9s; --dx: -12cqmin; }
.tile .spark:nth-of-type(3) { animation-delay: 1.7s; --dx: 10cqmin; }
.tile:hover .spark { animation-duration: 1.1s; }
@keyframes flicker2 {
  0%, 100% { transform: scale(1, 1) rotate(-1deg) skewX(0); }
  20% { transform: scale(.96, 1.06) rotate(1.5deg) skewX(2deg); }
  40% { transform: scale(1.04, .95) rotate(-2deg) skewX(-2deg); }
  60% { transform: scale(.98, 1.08) rotate(1deg) skewX(1deg); }
  80% { transform: scale(1.02, .97) rotate(-1.5deg) skewX(-1deg); }
}
@keyframes breathe { from { opacity: .55; transform: scale(.9); } to { opacity: 1; transform: scale(1.1); } }
@keyframes spark { 0% { opacity: 0; transform: translate(-50%, 0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 4cqmin)), -26cqmin) scale(.3); } }
.tile.chhota::after, .tile.chhota .spark { display: none; }
.tile.maha, .tile.akhand { isolation: isolate; }
.tile.maha::before, .tile.akhand::before { content: ''; position: absolute; inset: -2px; border-radius: 19%; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--spin), #F6A21E, #FFF6E5, #FF6A2B, #D6246E, #0FA3A3, #F6A21E);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinv 5s linear infinite; }
.tile.akhand::before { padding: 3px; animation-duration: 3.5s; }
.tile.akhand .ring { position: absolute; inset: 4%; pointer-events: none; animation: spin 40s linear infinite; opacity: .55; z-index: -1; }
.tile.akhand .ring svg { width: 100%; height: 100%; }
@keyframes spinv { to { --spin: 360deg; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Centre ring rangoli */
.zone { position: relative; overflow: hidden; background: radial-gradient(closest-side, #f6a21e24, #d6246e12 70%, transparent); box-shadow: inset 0 0 0 1px #f6a21e40, inset 0 0 40px #f6a21e14; }
.zone .mandala { position: absolute; left: 50%; top: 50%; height: 118%; aspect-ratio: 1; translate: -50% -50%; opacity: .32; animation: spin 160s linear infinite; }
.zone .mandala svg { width: 100%; height: 100%; }
.zone .mandala .rg { transform-origin: center; animation: bloom 1.6s cubic-bezier(.2,.8,.2,1.2) both; }
.zone .mandala .rg1 { animation-delay: .15s; } .zone .mandala .rg2 { animation-delay: .3s; } .zone .mandala .rg3 { animation-delay: .45s; } .zone .mandala .rg4 { animation-delay: .6s; }
@keyframes bloom { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
.zone::after { content: 'centre ring ✦'; color: #ffd27a99; }

/* Hover on a free spot: ghost flame */
.cursor-cell::before { content: ''; position: absolute; left: 85%; top: 0; width: 34%; height: 44%; translate: -50% 0; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%, #fff6e5 0 15%, #ffd25e 30%, var(--marigold) 50%, transparent 72%); opacity: .9; animation: flicker2 .9s infinite; }
.cursor-cell.bad::before { display: none; }

/* Empty-wall invitation */
.invite { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 5; text-align: center; padding: 22px 28px; border-radius: 24px; width: min(420px, 86%);
  background: radial-gradient(120% 120% at 50% 0%, #3a2378f2, #1c1240f2); box-shadow: 0 0 0 1px #f6a21e66, 0 0 60px #f6a21e44, 0 20px 50px #000a; animation: frameIn .8s .6s both; }
.invite h2 { font: 400 clamp(1.3rem, 3vw, 2rem)/1.15 var(--display); margin: 0 0 6px; color: var(--marigold); }
.invite p { margin: 0 0 14px; color: var(--muted); }

/* Reveal: wave of light from the centre */
.wall.reveal { background-image: var(--unlit); }
.wall.reveal::before { opacity: 1; mix-blend-mode: normal; animation: revealWave 3.5s cubic-bezier(.3,.6,.2,1) forwards; background: var(--lit) 0 0 / var(--cell) var(--cell);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 var(--rv), transparent calc(var(--rv) + 8%)); mask: radial-gradient(circle at 50% 50%, #000 var(--rv), transparent calc(var(--rv) + 8%)); }
@keyframes revealWave { to { --rv: 110%; } }
.reveal-banner span { background: radial-gradient(closest-side, #1c1240ee, #1c124099 70%, transparent);
  animation: revealText 1.4s 1.8s cubic-bezier(.2,.8,.2,1.2) both; }
.reveal-banner span::after { content: 'शुभ दीपावली'; display: block; font-size: .42em; color: #ff8fc0; text-align: center; margin-top: .2em; }
@keyframes revealText { from { opacity: 0; transform: scale(.6); filter: blur(8px); } }

/* Deal sheet flourish */
.sheet { background: radial-gradient(120% 50% at 50% 0%, #4a2a8a, transparent 70%), linear-gradient(180deg, #2c1b66, #1c1240 70%); }
.sheet .sheet-head { background: transparent; }
.deal-logo { position: relative; overflow: visible; }
.deal-logo::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; background: conic-gradient(from var(--spin), #F6A21E, #D6246E, #0FA3A3, #FF6A2B, #F6A21E); animation: spinv 4s linear infinite; z-index: -1;
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); filter: blur(1px); }
.deal-logo img, .deal-logo b { border-radius: 50%; }
.sheet.open .deal > * { animation: rise-in .5s cubic-bezier(.2,.8,.2,1) both; }
.sheet.open .deal > *:nth-child(2) { animation-delay: .05s; } .sheet.open .deal > *:nth-child(3) { animation-delay: .1s; } .sheet.open .deal > *:nth-child(4) { animation-delay: .15s; } .sheet.open .deal > *:nth-child(5) { animation-delay: .2s; } .sheet.open .deal > *:nth-child(6) { animation-delay: .25s; } .sheet.open .deal > *:nth-child(7) { animation-delay: .3s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
.offer { position: relative; overflow: hidden; background: linear-gradient(135deg, #d6246e44, #ff6a2b33, #f6a21e33); }
.offer::before { content: '🎁'; float: right; font-size: 1.6rem; margin-left: 8px; animation: bob 1.6s ease-in-out infinite alternate; }

/* Footer: rangoli dot border */
.footer:first-of-type { border-top: 0; }
.footer .right { background: linear-gradient(90deg, #F6A21E, #FFD54A, #FF6A2B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rangoli-line { height: 8px; margin: 4px clamp(12px, 3vw, 28px) 0; background: radial-gradient(circle, #F6A21E 0 2px, transparent 2.5px) 0 0 / 16px 8px, radial-gradient(circle, #D6246E 0 2px, transparent 2.5px) 8px 0 / 16px 8px; opacity: .6; position: relative; z-index: 2; }

/* Buy page flourishes */
.tier-card .mini i { animation: bob 2.4s ease-in-out infinite alternate; }
.tier-card:hover .mini i, .tier-card[aria-pressed="true"] .mini i { filter: drop-shadow(0 0 18px #f6a21e) brightness(1.2); }
.tier-card { position: relative; overflow: hidden; }
.tier-card[aria-pressed="true"]::after { content: '✓'; position: absolute; top: 10px; right: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--marigold); color: #3a1606; font-weight: 700; animation: pop .35s cubic-bezier(.2,.8,.2,1.4); }
@keyframes pop { from { transform: scale(0); } }
.panel { animation: frameIn .6s cubic-bezier(.2,.8,.2,1) both; }
.success .big-diya { animation: bob 1.8s ease-in-out infinite alternate; }

/* Admin preview panel */
.preview-panel { position: fixed; left: 14px; bottom: 14px; z-index: 30; width: min(360px, calc(100vw - 28px)); padding: 14px 16px; border-radius: 18px;
  background: #1c1240f2; box-shadow: 0 0 0 1px #f6a21e66, 0 20px 50px #000c; font-size: .92rem; }
.preview-panel h3 { margin: 0 0 2px; font: 400 1.15rem var(--display); color: var(--marigold); }
.preview-panel .presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.preview-panel .presets button { all: unset; cursor: pointer; padding: 5px 10px; border-radius: 999px; background: #ffffff14; font-size: .85rem; }
.preview-panel .presets button:hover, .preview-panel .presets button[aria-pressed="true"] { background: var(--marigold); color: #3a1606; }
.preview-panel input[type=range] { padding: 0; accent-color: var(--marigold); }
.preview-panel .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.preview-panel .mix { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.preview-panel.min > :not(h3):not(.row:first-of-type) { display: none; }
.zone::after { transform: none; top: 6px; left: 10px; padding: 0; }
.stage { padding-top: 34px; }
.wall-frame { --cell: min(calc((100vw - 2 * clamp(8px, 2.5vw, 28px) - 28px) / 48), calc((100dvh - 214px) / 30)); }
.corner { width: 84px; height: 84px; }
.corner.tl { left: -42px; top: -42px; } .corner.tr { right: -42px; top: -42px; } .corner.bl { left: -42px; bottom: -42px; } .corner.br { right: -42px; bottom: -42px; }
@media (max-width: 760px) { .stage { padding-top: 22px; } .wall-frame { --cell: calc((100vw - 16px - 16px) / 48); } }

/* Performance: animate only transform/opacity on the many small tiles */
.tile { animation-name: ignite2; }
@keyframes ignite2 { from { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.tile .flame { filter: none; will-change: transform; }
.tile:hover .flame { filter: drop-shadow(0 0 6cqmin #ffb13b) brightness(1.15); }
.tile.chhota .flame { animation-duration: 2.4s; }
.tile .spark { display: none; }
.tile.bada .spark, .tile.maha .spark, .tile.akhand .spark { display: block; }
.lanterns span, .kandil, .tile::after { will-change: transform; }

/* Mobile inline deals */
.m-deals { display: none; position: relative; z-index: 2; padding: 4px 16px 10px; }
.m-deals h2 { font: 400 1.4rem var(--display); color: var(--marigold); margin: 8px 0 4px; }
#m-deals { display: grid; gap: 2px; }
@media (max-width: 760px) { .m-deals { display: block; } }

/* ---- Mobile polish & fixes ---- */
.sheet:not(.open) { visibility: hidden; transition: transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s .25s; }
.wall-frame.place-frame { --cell: min(calc((min(1180px, 100vw) - 2 * clamp(12px, 3vw, 28px) - 2 * clamp(16px, 3vw, 28px) - 30px) / 48), 24px); }
#s-spot .wall-scroll { overflow: auto; padding: 4px 0 8px; }
.zoom-fab { display: none; }
@media (max-width: 760px) {
  .wall-frame.place-frame { --cell: 18px; }
  #s-spot .wall-scroll { margin: 0 -8px; }
  .zoom-fab { display: inline-flex; position: absolute; right: 10px; top: 10px; z-index: 6; padding: 7px 12px; font-size: .85rem; background: #1c1240dd; color: var(--cream); box-shadow: 0 0 0 1px #f6a21e88, 0 4px 14px #0008; }
  .stage { position: relative; }
  .tiers { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tier-card { padding: 12px; }
  .tier-card .mini { height: 52px; }
  .tier-card .dims { font-size: .8rem; }
  .tier-card h3 { font-size: 1.1rem; }
  .price { font-size: 1.15rem; }
  .tier-card.akhand { grid-column: 1 / -1; }
  .buy-wrap .row-actions .btn-primary { width: 100%; }
  .topbar .btn-ghost { padding: 9px 13px; font-size: .9rem; }
  .back-label { display: none; }
  .stepper li { padding: 5px 11px; font-size: .85rem; }
  .panel h1 { font-size: 1.6rem; }
  .preview-card { position: static; }
  .counter span { font-size: .85rem; }
  .preview-panel { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 55dvh; overflow: auto; }
  .hold-bar { font-size: .9rem; }
  .footer { justify-content: center; }
  .footer .right { margin-left: 0; width: 100%; text-align: center; }
  .footer.small { gap: 8px 14px; }
}
@media (max-width: 380px) { .tiers { grid-template-columns: 1fr; } .wordmark { font-size: 1.25rem; } }
.toast { max-width: min(92vw, 420px); text-align: center; border-radius: 18px; }
input[type=file] { padding: 8px; }
input[type=file]::file-selector-button { font: 600 .9rem var(--body); border: 0; border-radius: 999px; padding: 8px 14px; margin-right: 10px; background: var(--peacock); color: #fff; cursor: pointer; }

/* ---- Scale: hundreds of tiles must stay smooth on phones ---- */
.tile { contain: layout style; }
.tile .flame, .tile::after { animation: none; will-change: auto; }
.tile.anim .flame { animation: flicker2 1.8s ease-in-out infinite; animation-delay: var(--f, 0s); }
.tile.anim::after { animation: breathe 3.2s ease-in-out infinite alternate; animation-delay: var(--f, 0s); }
.tile.tw .flame { animation: flicker2 .9s ease-in-out 2; }
.tile .spark, .tile.bada .spark, .tile.maha .spark, .tile.akhand .spark { display: none; }
.tile.anim.bada .spark, .tile.anim.maha .spark, .tile.anim.akhand .spark { display: block; }
.tile.maha::before, .tile.akhand::before { animation: none; background: conic-gradient(from 45deg, #F6A21E, #FFF6E5, #FF6A2B, #D6246E, #0FA3A3, #F6A21E); }
.wall.calm .tile { animation: none; }
.wall.calm { animation: fadeIn .8s ease both; }
@keyframes fadeIn { from { opacity: 0; } }
.overlay { position: absolute; inset: 0; pointer-events: none; contain: strict; z-index: 4; }
.overlay .wish { position: absolute; width: calc(100% / var(--cols)); height: calc(100% / var(--rows)); }
.lanterns span, .kandil { will-change: auto; }
.tile.anim, .tile.tw { z-index: 2; }
.wall.calm .zone .mandala { animation: none; }
.small-tiles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; animation: fadeIn 1s .2s ease both; }
.cursor-cell.lit { box-shadow: 0 0 0 2px var(--flame), 0 0 22px #ff6a2b; }
.cursor-cell.lit::before { display: none; }

/* ================= Palette v3: midnight sky + sindoor-maroon deewar in a gold frame ================= */
:root {
  --sky-0: #07051a; --sky-1: #120c33; --sky-2: #1C1240;
  --wall-0: #3a0d2e; --wall-1: #2a0822; --wall-2: #451236;
  --gold: #E8B04A; --gold-2: #a8741f;
  --unlit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c47a45'/%3E%3Cstop offset='1' stop-color='%236e3a1f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='20' cy='33.5' rx='11' ry='1.6' fill='%23000' opacity='.35'/%3E%3Cpath d='M6 21h28c-1 7-7 11-14 11S7 28 6 21z' fill='url(%23c)'/%3E%3Cpath d='M30 21l6-3' stroke='%23a5643a' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M6 21h28' stroke='%23e3a465' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='25.5' r='1.1' fill='%23ffe0b0' opacity='.8'/%3E%3Ccircle cx='20' cy='27' r='1.1' fill='%23ffe0b0' opacity='.8'/%3E%3Ccircle cx='26' cy='25.5' r='1.1' fill='%23ffe0b0' opacity='.8'/%3E%3Cpath d='M34 18v-2' stroke='%23463022' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
body {
  background-color: var(--sky-0);
  background-image:
    radial-gradient(90% 45% at 50% 108%, #ff6a2b38, #d6246e26 40%, transparent 70%),
    radial-gradient(60% 30% at 50% 100%, #f6a21e22, transparent 70%),
    radial-gradient(50% 40% at 0% 0%, #0fa3a31c, transparent 70%),
    radial-gradient(50% 40% at 100% 0%, #7b3fe41f, transparent 70%),
    linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 45%, var(--sky-2) 80%, #2a1040 100%);
}

/* The deewar: lacquered maroon with a faint gold jaali, carved gold frame */
.wall-frame {
  background:
    radial-gradient(circle, #e8b04a14 1px, transparent 1.6px) 0 0 / 14px 14px,
    radial-gradient(120% 90% at 50% 40%, var(--wall-2), var(--wall-0) 55%, var(--wall-1));
  box-shadow:
    0 0 0 2px var(--gold), 0 0 0 5px #5a1a1a, 0 0 0 7px var(--gold-2), 0 0 0 8px #f6d48a66,
    0 0 50px #e8b04a33, 0 0 120px #ff6a2b1f, 0 30px 80px #000c, inset 0 0 0 1px #00000066, inset 0 0 90px #000a;
}
.wall { background-color: transparent; }
.zone { background: radial-gradient(closest-side, #f6a21e1c, #d6246e10 70%, transparent); box-shadow: inset 0 0 0 1px #e8b04a38; }
.zone::after { content: none; }
.zone .mandala { opacity: .26; }
.held { background: repeating-linear-gradient(45deg, #ffe0b014 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px #ffe0b030; }

/* Lit tiles: warm niches glowing on the maroon wall */
.tile { background: radial-gradient(circle at 50% 40%, #ffcb6a59, #ff6a2b26 48%, transparent 72%), linear-gradient(170deg, #5a1a4a, #2c0a28);
  box-shadow: inset 0 0 0 1px #e8b04a88, 0 0 14px #f6a21e40, 0 2px 6px #0008; }
.tile:hover, .tile:focus-visible { box-shadow: inset 0 0 0 1.5px #FFD54A, 0 0 26px #ff8a3aaa; }
.tile.akhand { background: radial-gradient(circle at 50% 42%, #ffcb6a66, #d6246e44 50%, transparent 75%), linear-gradient(160deg, #6e1650, #330a30); }

/* Header/footer accents follow the gold frame */
.countdown { background: linear-gradient(90deg, #d6246e40, #ff6a2b33); box-shadow: inset 0 0 0 1px #e8b04a66; color: #ffe6c7; }
.rangoli-line { opacity: .5; }

/* UI chrome (sheets, panels, dialogs): plum-indigo glass that belongs to the sky */
.sheet { background: radial-gradient(120% 45% at 50% 0%, #5a1a4a, transparent 70%), linear-gradient(180deg, #24123f, #120c33 75%); border-color: #e8b04a55; }
.panel { background: linear-gradient(170deg, #22123fe6, #140d33e6); box-shadow: 0 0 0 1px #e8b04a40, 0 20px 50px #000a; }
dialog { background: linear-gradient(180deg, #24123f, #120c33); box-shadow: 0 30px 80px #000c, 0 0 0 1px #e8b04a55; }
.preview-panel { background: #120c33f2; box-shadow: 0 0 0 1px #e8b04a66, 0 20px 50px #000c; }
.tier-card { background: #ffffff0a; }
.tier-card[aria-pressed="true"] { background: #e8b04a14; box-shadow: inset 0 0 0 2px var(--gold), 0 0 30px #e8b04a44; }
.invite { background: radial-gradient(120% 120% at 50% 0%, #4a1240f2, #24082af2); box-shadow: 0 0 0 1px var(--gold), 0 0 60px #f6a21e44, 0 20px 50px #000a; }

/* Buy-page placer: legend chip for the centre premium instead of a stray label */
.place-frame .zone::after { content: none; }

/* Buy placer: room for the corner rangolis */
#s-spot .wall-scroll { padding: 44px; margin: -20px -20px 0; }
.wall-frame.place-frame { --cell: min(calc((min(1180px, 100vw) - 2 * clamp(12px, 3vw, 28px) - 2 * clamp(16px, 3vw, 28px) - 100px) / 48), 24px); }
@media (max-width: 760px) { #s-spot .wall-scroll { padding: 26px; margin: 0 -14px; } .wall-frame.place-frame { --cell: 18px; } }
.tier-card.test { box-shadow: inset 0 0 0 2px var(--peacock); }

/* ---- Buy flow on phones: compact size rows + sticky action bar ---- */
@media (max-width: 760px) {
  .tiers { grid-template-columns: 1fr; gap: 8px; }
  .tier-card { display: grid; grid-template-columns: 48px 1fr auto; grid-template-areas: "mini name price" "mini dims dims"; align-items: center; column-gap: 12px; row-gap: 0; padding: 10px 12px; min-height: 64px; }
  .tier-card.akhand { grid-column: auto; }
  .tier-card .mini { grid-area: mini; height: 44px; place-items: center; }
  .tier-card .mini i { width: min(var(--s), 44px); height: min(var(--s), 44px); }
  .tier-card h3 { grid-area: name; margin: 0; font-size: 1.08rem; }
  .tier-card .dims { grid-area: dims; font-size: .78rem; line-height: 1.3; }
  .tier-card .price { grid-area: price; text-align: right; font-size: 1.05rem; white-space: nowrap; }
  .tier-card .price s { display: block; margin: 0; font-size: .78rem; }
  .left-badge { position: absolute; left: 6px; bottom: 4px; font-size: .62rem; padding: 1px 6px; }
  .tier-card[aria-pressed="true"]::after { top: 6px; left: 6px; right: auto; width: 18px; height: 18px; font-size: .7rem; }
  .panel .lede { margin-bottom: 10px; font-size: .95rem; }
  .eb { margin-bottom: 10px; }
  #s-size .row-actions, #s-spot .row-actions {
    position: sticky; bottom: 0; z-index: 8; margin: 14px -16px -16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #140d33e0, #140d33fa 30%); backdrop-filter: blur(6px); border-radius: 0 0 22px 22px; box-shadow: 0 -8px 20px #0006; flex-wrap: nowrap;
  }
  #s-size .row-actions .small { display: none; }
  #s-spot .row-actions .btn-ghost { padding: 10px 12px; font-size: .85rem; white-space: nowrap; }
  #s-spot .row-actions .btn-primary { width: auto; flex: 1; }
  #s-spot .row-actions .price { font-size: .95rem; white-space: nowrap; }
}
.share-kit { display: grid; gap: 8px; max-width: 360px; margin: 18px auto; }

/* ---- /brands pitch page ---- */
.brands { max-width: 1100px; margin: 0 auto; padding: 10px clamp(14px, 3vw, 28px) 60px; position: relative; z-index: 2; display: grid; gap: clamp(28px, 5vw, 56px); }
.b-hero { text-align: center; padding-top: 20px; }
.b-hero h1 { font: 400 clamp(2.1rem, 6vw, 4rem)/1.08 var(--display); margin: 14px auto 10px; max-width: 18ch;
  background: linear-gradient(100deg, #F6A21E, #FFD54A 40%, #FF6A2B); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px #f6a21e44); }
.b-hero .lede { max-width: 60ch; margin: 0 auto; font-size: clamp(1rem, 2.2vw, 1.2rem); color: #e9e2fb; }
.b-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 22px 0 26px; }
.b-cta .btn { padding: 15px 24px; font-size: 1.08rem; }
.b-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 760px; margin: 0 auto; }
.b-stats div { background: #ffffff0c; border-radius: 18px; padding: 14px 8px; box-shadow: inset 0 0 0 1px #e8b04a33; }
.b-stats b { display: block; font: 400 clamp(1.4rem, 4vw, 2rem)/1.1 var(--display); color: var(--cream); }
.b-stats span { font-size: .85rem; color: var(--muted); }
.b-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.b-why article { background: linear-gradient(170deg, #2a1048cc, #160c36cc); border-radius: 20px; padding: 20px 18px; box-shadow: 0 0 0 1px #e8b04a2e; }
.b-why i { font-style: normal; font-size: 2rem; }
.b-why h3 { font: 400 1.25rem var(--display); color: var(--marigold); margin: 8px 0 6px; }
.b-why p { margin: 0; color: #ddd3f5; font-size: .95rem; }
.brands h2 { font: 400 clamp(1.5rem, 4vw, 2.2rem) var(--display); color: var(--marigold); margin: 0 0 8px; }
.b-prices .tier-card { text-decoration: none; color: inherit; }
.b-how .steps li { font-size: 1.05rem; }
.b-faq details { background: #ffffff0a; border-radius: 14px; padding: 12px 16px; margin: 8px 0; box-shadow: inset 0 0 0 1px #ffffff14; }
.b-faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; }
.b-faq p { color: #ddd3f5; margin: 8px 0 2px; }
.b-final { text-align: center; padding: 26px; border-radius: 24px; background: radial-gradient(120% 120% at 50% 0%, #4a1240, #24082a); box-shadow: 0 0 0 1px var(--gold), 0 0 60px #f6a21e33; }
.b-final .btn { margin: 8px 0 10px; padding: 15px 26px; font-size: 1.1rem; }
.wa-fab { position: fixed; right: 16px; bottom: 16px; z-index: 30; background: #25D366; color: #06371b; font-weight: 700; padding: 12px 18px; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 30px #0008; }
@media (max-width: 860px) { .b-why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .b-stats { grid-template-columns: 1fr 1fr; } .b-why { grid-template-columns: 1fr; } .b-cta .btn { width: 100%; } }

/* Expanding wall: height-fit uses the live row count, with a floor so tall walls scroll rather than shrink */
.wall-frame { --cell: min(calc((100vw - 2 * clamp(8px, 2.5vw, 28px) - 28px) / 48), max(calc((100dvh - 214px) / var(--rows, 30)), 18px)); }
@media (max-width: 760px) { .wall-frame { --cell: calc((100vw - 16px - 16px) / 48); } }

.roi { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: center; }
.roi .fields { grid-template-columns: 1fr; }
.roi-out { text-align: center; padding: 18px; border-radius: 20px; background: radial-gradient(120% 120% at 50% 0%, #4a1240, #24082a); box-shadow: 0 0 0 1px var(--gold); }
.roi-big b { display: block; font: 400 clamp(3rem, 9vw, 4.6rem)/1 var(--display); background: linear-gradient(180deg, #FFF6E5, #FFD54A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.roi-big span { color: var(--marigold); font-weight: 600; }
.b-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.b-compare > div { border-radius: 18px; padding: 16px 18px; background: #ffffff08; box-shadow: inset 0 0 0 1px #ffffff1a; }
.b-compare .win { background: #e8b04a12; box-shadow: inset 0 0 0 2px var(--gold); }
.b-compare h3 { margin: 0 0 6px; font: 400 1.2rem var(--display); color: var(--cream); }
.b-compare .win h3 { color: var(--marigold); }
.b-compare ul { margin: 0; padding-left: 18px; color: #ddd3f5; }
.b-compare li { margin: 4px 0; }
@media (max-width: 700px) { .roi, .b-compare { grid-template-columns: 1fr; } }

.dfy-note { margin: -14px 0 22px; }
.dfy-line { margin: 14px 0 0; color: var(--muted); text-align: center; }
.linkish { all: unset; cursor: pointer; color: #7fe3e3; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.req-dialog .fields { margin-top: 10px; }
.req-dialog { width: min(620px, 94vw); }
.req-status { font: inherit; padding: 6px 8px; border-radius: 10px; width: auto; }
[hidden] { display: none !important; }