/* ===== css/addpuja.css ===== */
/* ================= add-puja: one lamp, three small steps =================
   Same idiom as the reviews sheet (03-reviews/reviews.css) so the two can merge into one sheet component.
   Base rules are the phone (390 px). Wider screens come in min-width queries at the end. */
.apsheet [hidden],.apdock[hidden],.apdock [hidden],.apask[hidden],#gmhelp [hidden]{display:none!important}
html:has(.apsheet[open]){overflow:hidden}

/* ---------- the lamp: one pill at the foot of the finder ---------- */
/* 8 Oct (Nayan's T2): the hero's map ticket, a + in the pin, the question above it; the button itself is only a frame */
.apq{margin:22px 0 0;text-align:center;font-size:.95rem;line-height:1.6;color:var(--fm,rgba(255,244,224,.7))}
.apcta{display:flex;justify-content:center;width:100%;margin:8px 0 0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.apcta .aptk{width:min(100%,400px)}
.apcta:hover .aptk{transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,170,0,.55)}
.apcta:active .aptk{transform:scale(.97)}
.apcta:focus-visible{outline:none}
.apcta:focus-visible .aptk{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:359px){.apcta .aptk{padding-left:12px;gap:8px}.apcta .mt-tag{padding:6px 10px}}   /* 320 px: the small line fits whole */
/* the flow's icons (they replaced emoji): not the hero's photo .ph */
:is(.apopt,.gmhelp,#apgm,.apdock) .ph{position:static;inset:auto;display:inline-block;border-radius:0;opacity:1;transition:none;line-height:1}
.apopt span .ph{font-size:1.5rem;color:var(--gold)}
#apgm .ph,#apdocktxt .ph{margin-right:6px;font-size:1.1rem;vertical-align:-2px}
.gmhelp .btn .ph{font-size:1.15rem}
#gmtitle .ph{color:var(--gold);vertical-align:-2px}
#gmraw{min-height:120px;margin:10px 0 0;font-size:.85rem}

/* ---------- sheet: bottom sheet on phones ---------- */
.apsheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:88dvh;padding:0;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--line);border-bottom:0;border-radius:26px 26px 0 0;color:var(--ink);
  background:linear-gradient(180deg,#420a1b,#20030b 70%);box-shadow:0 -20px 60px rgba(0,0,0,.55)}
.apsheet::backdrop{background:rgba(42,4,16,.7);backdrop-filter:blur(6px)}
.apsheet[open]{animation:apup .26s ease-out}
.apsheet[open]::backdrop{animation:apfade .26s ease-out}
.apsheet.out{animation:apdown .18s ease-in forwards}
.apsheet.out::backdrop{animation:apfadeout .18s ease-in forwards}
@keyframes apup{from{transform:translateY(100%)}}
@keyframes apdown{to{transform:translateY(100%)}}
@keyframes apfade{from{opacity:0}}
@keyframes apfadeout{to{opacity:0}}

.apform{position:relative;display:grid;gap:12px;padding:10px 18px calc(20px + env(safe-area-inset-bottom))}
.aphandle{justify-self:center;width:36px;height:4px;border-radius:2px;background:rgba(255,210,122,.45)}
.apx{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink);font:inherit;font-size:1.1rem;cursor:pointer;opacity:.8}
.apx:hover,.apx:focus-visible{opacity:1;background:rgba(255,255,255,.08)}
.apidle{display:grid;gap:12px}
.apsheet h3{font-size:1.35rem;line-height:1.5;padding:.15em 44px 0 0;color:var(--gold);font-weight:400}

/* ---------- the rail: ১ নাম · ২ জায়গা · ৩ পাঠান ---------- */
.aprail{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:0;list-style:none}
.aprail li{display:flex;align-items:center;gap:7px;padding-top:8px;border-top:3px solid rgba(255,210,122,.18);font-size:.86rem;color:rgba(255,244,224,.6)}
.aprail b{display:grid;place-items:center;width:28px;height:28px;padding-top:.14em;border-radius:50%;border:1px solid var(--line);font-size:1rem;line-height:1;font-weight:400;color:var(--gold)}
.aprail li[aria-current]{border-color:var(--gold);color:#ffe9b0;font-weight:600}
.aprail li[aria-current] b{background:linear-gradient(135deg,var(--gold),var(--gold2));border-color:transparent;color:#3a0512;box-shadow:0 0 16px rgba(255,170,60,.55)}
.aprail li.done{border-color:rgba(255,210,122,.6);color:#ffe9b0}
.apback{justify-self:start;min-height:44px;margin:-6px 0 -8px;padding:0 4px;border:0;background:none;color:var(--gold);font:inherit;font-size:.9rem;cursor:pointer}
.apback:focus-visible,.aplink:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}

/* ---------- steps and fields ---------- */
.apstep{display:grid;gap:8px;min-width:0;margin:0;padding:0;border:0;animation:apstep .22s ease-out}
@keyframes apstep{from{opacity:0;transform:translateX(14px)}}
.apvh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.aplbl{font-size:.92rem;font-weight:600;color:#ffe9b0}
.aplbl small{font-weight:400;opacity:.7}
.apsheet input.plain,.apsheet select{min-height:48px}
.apsheet input[aria-invalid="true"],.apsheet select[aria-invalid="true"]{border-color:#ff9a86}
.aprow{display:grid;gap:10px}
.apfield{display:grid;gap:8px;min-width:0}
.aprow select{min-width:0;width:100%}
.approb,.apfail{font-size:.86rem;line-height:1.55;color:#ffb8a8}
.aphint,.apfine{font-size:.8rem;line-height:1.6;opacity:.7}
.apfine{text-align:center;opacity:.6}
.apdup{display:grid;gap:6px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,210,122,.08);font-size:.88rem;line-height:1.55;color:#ffe9b0}
.apdup.need{border-color:#ff9a86;box-shadow:0 0 0 1px #ff9a86}
.apchk{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:600}
.apchk input{width:22px;height:22px;padding:0;accent-color:var(--gold2)}

/* ---------- step 2: three tall option rows ---------- */
.apopts{display:grid;gap:8px}
.apopt{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:0 10px;min-height:64px;padding:10px 14px;border-radius:16px;border:1px solid var(--line);
  background:rgba(0,0,0,.25);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.apopt span{grid-row:span 2;font-size:1.5rem;text-align:center}
.apopt b{font-weight:600;color:#ffe9b0}
.apopt small{font-size:.8rem;opacity:.7}
.apopt:hover,.apopt[aria-expanded="true"]{border-color:var(--gold);background:rgba(255,210,122,.08)}
.apopt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.aplinkbox{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:-2px}
.aplinkbox .approb{grid-column:1/-1}
.apmsg{font-size:.86rem;line-height:1.55;color:#ffe9b0}
.apmsg.bad{color:#ffb8a8}
.apchosen{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:6px 6px 6px 14px;border-radius:16px;border:1px solid var(--gold);background:rgba(255,210,122,.08);font-size:.9rem;color:#ffe9b0}
.aplink{min-height:44px;padding:0 10px;border:0;background:none;color:var(--gold);font:inherit;font-size:.9rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- step 3: summary, send, frames ---------- */
.apsum{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:4px 0 0;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.25);font-size:.9rem;line-height:1.5}
.apsum dt{opacity:.7}
.apsum dd{margin:0;color:#ffe9b0;word-break:break-word}
.apnext{width:100%;min-height:48px;justify-content:center;padding:14px 24px}
.apnext:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.apdone{display:grid;justify-items:center;gap:16px;padding:40px 8px 26px;text-align:center}
.apdone .apdiya{scale:2.2;margin:10px 0 6px}
.apdone p.serif{font-size:1.25rem;line-height:1.7;color:#ffe9b0}
.apdone a.aplink{display:inline-flex;align-items:center}

/* ---------- the diya mark: unlit while under review, lit once approved ---------- */
.apdiya{position:relative;display:inline-block;flex:0 0 22px;width:22px;height:20px;margin-right:6px;vertical-align:-3px;pointer-events:none}
.apdiya::before{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;border-radius:2px 2px 12px 12px;background:linear-gradient(#d9955e,#b5673a 55%,#5a2210)}
.apdiya::after{content:"";position:absolute;left:50%;bottom:7px;width:8px;height:12px;margin-left:-4px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 72%,#fff4d6,#ffc44d 50%,#ff7a1a);opacity:.22;filter:grayscale(.7)}
.apdiya.lit::after{opacity:1;filter:none;box-shadow:0 -2px 14px 5px rgba(255,166,60,.7);animation:apflick 2.6s ease-in-out infinite}
@keyframes apflick{50%{scale:1 1.12}}
.pin.apwait span{filter:grayscale(.75) brightness(.8);box-shadow:none;animation:none;border-style:dashed}

/* ---------- own card: badge, delete, the inline confirm line ---------- */
.apbadge{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:99px;border:1px dashed var(--gold);font-size:.72rem;font-weight:600;color:var(--gold);vertical-align:2px}
.card.apfresh{border-color:var(--gold)}
.apdel,.apask button{min-height:32px;padding:0 4px;border:0;background:none;color:#ffb8a8;font:inherit;font-size:.85rem;font-weight:500;cursor:pointer}
.apask{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:.85rem;color:#ffe9b0}
.apask .apyes{color:#ffb8a8;font-weight:700}
.apask .apno{color:var(--gold)}
.apdel:focus-visible,.apask button:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-radius:6px}

/* ---------- dock bar: the sheet steps aside while the visitor taps the big map ---------- */
.apdock{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom) + var(--musicbar-h));z-index:60;display:flex;align-items:center;gap:8px;
  min-height:60px;padding:8px 8px 8px 18px;border-radius:22px;border:1px solid var(--gold);background:linear-gradient(180deg,#420a1b,#20030b);
  box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 24px rgba(255,170,60,.25);color:#ffe9b0;animation:apbar .25s ease-out;outline:none}
@keyframes apbar{from{opacity:0;transform:translateY(24px)}}
.apdock p{flex:1;font-size:.95rem;line-height:1.4}
.apdockgo{flex:1;min-height:44px;justify-content:center}
.apdock .apx{position:static;flex:0 0 44px}

/* ---------- wider phones: থানা and address share a row ---------- */
@media (min-width:430px){.aprow{grid-template-columns:1fr 1fr}}

/* ---------- tablet and up: the sheet becomes a centred card ---------- */
@media (min-width:700px){
  .apsheet{inset:0;margin:auto;max-width:520px;height:fit-content;border-bottom:1px solid var(--line);border-radius:26px}
  .apsheet[open]{animation:appop .26s ease-out}
  .apsheet.out{animation:appopout .18s ease-in forwards}
  .aphandle{display:none}
  .apform{padding:18px 24px 24px}
  .apdock{left:50%;right:auto;width:480px;margin-left:-240px}
  .apcta{margin:8px auto 0}
  @keyframes appop{from{opacity:0;transform:translateY(24px) scale(.98)}}
  @keyframes appopout{to{opacity:0;transform:translateY(16px) scale(.98)}}
}

/* ---------- reduced motion: no slide, fade only; no flame flicker ---------- */
@media (prefers-reduced-motion:reduce){
  .apsheet[open]{animation:apfade .2s ease-out!important}
  .apsheet.out{animation:apfadeout .18s ease-in forwards!important}
  .apstep,.apdock{animation:apfade .2s ease-out!important}
  .apdiya::after{animation:none!important}
}

/* ===== css/finder.css ===== */
/* ================= finder, Pujo Metro: three bands in page flow (controls, the map, the diagram) =================
   Flat: solid tonal steps, 2 px rules, no glass, glow, blur, grain or surface gradients. Shapes: line badges radius 8,
   station dots full circles, buttons pills, nothing else rounded. Phone base (390 px); desktop in one min-width query at the end.
   Nothing sits on the map on phones but the tile credit and the two-finger hint. Only transform, opacity and stroke-dashoffset animate.
   The line badges, the line card, the pins and the route: finder-metro.css. The deck around the card: finder-deck.css. */
#finder{--fs:#3a0a17;--fs2:#4a1020;--fr:#5c1a2b;--fm:rgba(255,244,224,.7);--ground:#1f0309;
  padding-top:56px;padding-bottom:calc(3vh + var(--musicbar-h));clip-path:inset(0 -100vmax)}   /* the page ground shows through (the flowers fall over it); clip-path keeps the finder its own layer */
#finder [hidden]{display:none!important}
html.flock{overflow:hidden}
html.flock .apdock{z-index:140}   /* the 04 dock bar stays over the fullscreen map */
.fvh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#finder :is(.fchip,.fpill,.fgo,.fbig,.fst,.flhb):focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#finder .ph{position:static;inset:auto;display:inline-block;border-radius:0;opacity:1;transition:none;font-size:1.15em;line-height:1}   /* the hero's own .ph (photo slides) must not reach the icons */

/* ---------- the pill: every button in the finder ---------- */
.fpill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--fr);
  background:var(--fs);color:var(--ink);font:inherit;font-size:.92rem;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .15s ease}
.fpill:active{transform:scale(.97)}
.fpill:hover{border-color:var(--gold)}
.fpill-on{border-color:var(--lc,var(--gold));background:var(--lc,var(--gold));color:var(--deep)}

/* ---------- band 1, the controls: label, the field with its bottom rule, near me, the status line ---------- */
.fctl{position:relative;z-index:2;margin-bottom:16px}
.flabel{display:block;margin-bottom:2px;font-size:.82rem;font-weight:600;letter-spacing:0;color:var(--fm)}
.fsearch{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}
.fgo{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:999px;background:var(--gold);color:var(--deep);cursor:pointer;
  transition:transform .15s ease}
.fgo:active{transform:scale(.94)}
.fnear{flex:0 0 auto}
.fnear[aria-busy="true"]{opacity:.6}
.fstat{margin-top:10px;padding-left:12px;border-left:2px solid var(--gold);font-size:.88rem;line-height:1.5}
.fstat.bad{border-left-color:#ff6a3d;color:#ffd0c0}

/* ---------- the one oversized type moment: the live count ---------- */
.fline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px 12px;margin-top:14px;min-width:0}
.fcount{flex:0 0 auto;display:flex;align-items:baseline;gap:6px}
.fcount b{font-family:'Hind Siliguri',sans-serif;font-size:clamp(4.5rem,22vw,7rem);font-weight:700;line-height:1;letter-spacing:0;color:var(--gold);
  font-variant-numeric:tabular-nums}
.fcount span{font-size:1.05rem;font-weight:600}
.fscope{flex:1 1 100%;min-width:0;font-size:.9rem;line-height:1.45;color:var(--fm)}

/* ---------- band 2, the map: a viewer, full bleed, 2 px rules top and bottom, flat ground while tiles load ---------- */
.fstage{position:relative;isolation:isolate;height:46dvh;min-height:320px;margin:0 -16px;overflow:hidden;scroll-margin-top:72px;
  border-block:2px solid var(--fr);background:var(--ground)}
#map{position:absolute;inset:0;z-index:0}
#map.leaflet-container{background:var(--ground);font:inherit}
.fstage .leaflet-tile{filter:grayscale(1) brightness(.5) contrast(1.15)}   /* OSM desaturated and darkened, flat: the routes carry the colour */
.fstage .leaflet-control-attribution{margin:0;padding:0 7px;background:var(--ground);color:rgba(255,244,224,.6);font-size:9px;line-height:1.6}
.fstage .leaflet-control-attribution a{color:rgba(255,210,122,.8)}
/* scoped under #map: leaflet.css now loads after this file (non-blocking), so equal-specificity rules would lose */
#map .leaflet-popup-content{color:#2a0410;font-family:'Hind Siliguri',sans-serif;line-height:1.5}
#map .leaflet-popup-content a{color:#b3122b;font-weight:600}
/* the station popup on desktop (8 Oct, A1): glass card, gold edge, sindoor directions button */
.fpop .leaflet-popup-content-wrapper,.fpop .leaflet-popup-tip{background:rgba(26,3,10,.96);color:#fff4e0;border:1px solid rgba(255,210,122,.45)}
.fpop .leaflet-popup-content-wrapper{border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.55)}
#map .fpop .leaflet-popup-content{margin:0;color:inherit;width:auto!important}
#map .fpop a.leaflet-popup-close-button{width:32px;height:32px;font-size:20px;line-height:30px;color:inherit;opacity:.7}
.fpop .ph{position:static;inset:auto;display:inline-block;border-radius:0;opacity:1;transition:none;line-height:1}
.fpopc{box-sizing:border-box;width:260px;padding:14px 16px 16px}
.fpopc h3{margin:0;padding-right:20px;font-size:1.05rem;font-weight:700;line-height:1.4;color:#ffe9b0}
.fpth{display:flex;align-items:center;gap:6px;margin:2px 0 0;font-size:.82rem;opacity:.85}
.fpdot{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--lc)}
.fprate{display:flex;align-items:center;gap:5px;margin:6px 0 0;font-size:.82rem;font-weight:600;color:#ffcf5a}
.fprate.none{color:inherit;opacity:.6;font-weight:500}
.fpact{display:flex;gap:8px;margin-top:12px}
.fpop .fpact .btn{flex:1;white-space:nowrap;min-height:42px;padding:0 12px;justify-content:center;gap:6px;font-size:.9rem;color:#ffe9b0}
.fpop .fpact .btn.ghost{flex:0 0 auto;color:#fff4e0}
html[data-theme="light"] .fpop .leaflet-popup-content-wrapper,html[data-theme="light"] .fpop .leaflet-popup-tip{background:#fffaf2;color:#3a0512;border-color:rgba(179,18,43,.25)}
html[data-theme="light"] .fpopc h3{color:#b3122b}
html[data-theme="light"] .fprate{color:#b36b00}
html[data-theme="light"] .fpop .fpact .btn.ghost{color:#3a0512}
.fstage .leaflet-control-zoom{display:none}
.fstage.expanded{position:fixed;inset:0;z-index:130;height:100dvh;min-height:0;margin:0;border:0}
.fstage.expanded .leaflet-control-zoom{display:block}
.fclose{position:absolute;z-index:960;top:calc(14px + env(safe-area-inset-top));right:14px;border-color:var(--gold)}
.fbig{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:4px 0 0;padding:0 12px;border:0;background:none;
  color:var(--gold);font:inherit;font-size:.92rem;font-weight:600;cursor:pointer}

/* ---------- stage messages: the two-finger hint, the map that did not load ---------- */
.fhint{position:absolute;z-index:950;left:50%;top:46%;width:max-content;max-width:86%;padding:8px 16px;border:2px solid var(--gold);background:var(--fs);
  color:var(--ink);font-size:.92rem;font-weight:600;text-align:center;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.96);transition:opacity .25s,transform .25s}
.fhint.on{opacity:1;transform:translate(-50%,-50%)}
.ffail{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:var(--gold);font-weight:600;background:var(--ground)}

/* ---------- band 3 frame: the line deck (finder-deck.css, finder-metro.css) ---------- */
.fplaces{margin-top:20px}
.ffoot{margin-top:6px}

/* ---------- desktop: left 440 px = controls and the line deck; right = the map, sticky under the nav ---------- */
@media (min-width:900px){
  #finder{padding-top:9vh}
  .fwrap{display:grid;grid-template-columns:440px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"ctl map" "places map";gap:0 28px}
  .fctl{grid-area:ctl}
  .fplaces{grid-area:places;margin-top:0}
  .fcount b{font-size:7rem}
  .fstage{grid-area:map;align-self:start;position:sticky;top:88px;height:calc(100vh - 112px);min-height:0;margin:0;border:2px solid var(--fr)}
  .fbig,.fhint{display:none}
  .fstage .leaflet-control-zoom{display:block}
}

/* ===== css/finder-metro.css ===== */
/* ================= finder, Pujo Metro: the line badges, the diagram, the station pins, the route =================
   Every thana is a line in one of 5 route colours (--lc, set per element by the JS), every pandal a station.
   The Bangla line number rides on every badge so colour is never the only cue. Motion has one job: show the route order. */

/* ---------- the line badge: a radius 8 tag in the line colour with the number in dark ink ---------- */
.fbadge{flex:0 0 auto;display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 5px;border-radius:8px;background:var(--lc,var(--gold));
  color:var(--deep);font-size:.92rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}

/* ---------- the line selector: outlined in the line colour, the chosen one filled ---------- */
.fchips{display:flex;gap:8px;margin:14px -16px 0;padding:0 16px 4px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;
  scrollbar-width:none;overscroll-behavior-x:contain}
.fchips::-webkit-scrollbar{display:none}
.fchip{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 8px;border-radius:8px;
  border:2px solid var(--lc,var(--fr));background:var(--deep);color:var(--ink);font:inherit;font-size:.92rem;font-weight:600;white-space:nowrap;cursor:pointer}
.fchip>.ph{margin-left:4px;color:var(--gold)}
.fchip b{font-weight:500;color:var(--fm)}   /* no tabular-nums: Bangla digits overlap in some fallback fonts */
.fchip[aria-pressed="true"]{background:var(--lc,var(--gold));border-color:var(--lc,var(--gold));color:var(--deep)}
.fchip[aria-pressed="true"] b,.fchip[aria-pressed="true"]>.ph{color:var(--deep)}
.fchip[aria-pressed="true"] .fbadge{background:var(--deep);color:var(--lc)}

/* ---------- the line card: a header, then the stations on a 6 px spine (finder-deck.css holds the deck around it) ---------- */
.fln{--sp:17px;margin-top:12px;padding:14px 14px 6px;background:var(--fs);border-top:2px solid var(--lc)}
.fln:first-child{margin-top:0}
.flh{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.flhb{display:flex;align-items:center;gap:10px;min-height:44px;width:100%;padding:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.flhb .fbadge{min-width:34px;height:34px;font-size:1.1rem}
.flhn{flex:1;min-width:0;font-size:1.12rem;font-weight:700;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flhc{flex:0 0 auto;font-size:.86rem;font-weight:600;color:var(--lc)}
.flhw{padding-left:44px;font-size:.86rem;line-height:1.45;color:var(--fm)}
.flhact{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 4px}
.flhact .fpill{flex:1 1 auto}
.flhact .fpill-on:has(~ .flhleg){flex-basis:100%}                          /* a long line: শুরু করুন on its own row, the legs below it */
.flhleg{flex-basis:100%;margin:0;font-size:.78rem;line-height:1.4;color:var(--fm)}

.fsts{position:relative;list-style:none;margin:0;padding:0}
.fsts::before{content:"";position:absolute;left:calc(var(--sp) - 3px);top:0;bottom:0;width:6px;background:var(--lc);transform-origin:50% 0}   /* the spine */
.fst{position:relative;z-index:1;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:10px 6px 12px 0;cursor:pointer;scroll-margin-top:96px}
.fst:last-child::after{content:"";position:absolute;z-index:-1;left:calc(var(--sp) - 3px);top:22px;bottom:0;width:6px;background:var(--fs)}   /* the line ends at the last station */
/* a long line: the first 8 stations, the spine ends at the 8th, the rest behind "আরও …টি মণ্ডপ দেখুন" */
.fsts.fcut .fst:nth-child(n+9){display:none}
.fsts.fcut .fst:nth-child(8)::after{content:"";position:absolute;z-index:-1;left:calc(var(--sp) - 3px);top:22px;bottom:0;width:6px;background:var(--fs)}
.fmore{display:flex;justify-content:center;padding:6px 0 14px}
.fmorebtn{min-width:60%}
#finder .fmorebtn .ph{color:var(--gold)}
.fdot{grid-row:1/3;justify-self:center;width:22px;height:22px;margin-top:1px;border-radius:50%;border:4px solid var(--lc);background:#fff;transition:transform .15s ease}
.fsb{min-width:0}
.fsn{font-size:1rem;font-weight:600;line-height:1.45}
.fsm{margin-top:2px;font-size:.84rem;line-height:1.45;color:var(--fm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsa{grid-column:3;display:flex;gap:8px}
.fsa .fpill{width:44px;padding:0;font-size:0}                              /* compact: icon only, the label lives in aria-label */
#finder .fsa .fpill .ph{font-size:1.15rem;color:var(--gold)}
.fsa:has(.gmadd){grid-column:2/4;flex-wrap:wrap;margin-top:8px}           /* an own puja keeps its labelled actions on their own line */
.fsa:has(.gmadd) .fpill{width:auto;padding:0 16px;font-size:.92rem}
.fsa:has(.gmadd) .fpill{min-width:96px}
.fsa .gmadd{flex:1 1 100%}
.fst:hover .fsn{color:var(--gold)}
.fst.active::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(var(--sp) + 8px);right:-14px;background:var(--fs2)}   /* a flat tonal step right of the spine */
.fst.active .fsn{color:var(--gold)}
.fst.active .fdot{transform:scale(1.4)}
.fwait .fdot{background:var(--fs);border-style:dashed}                    /* a pending own puja: a hollow station */
.fwaitb{display:inline-block;margin:4px 0 2px;padding:1px 8px;border-radius:8px;border:2px solid var(--fm);font-size:.74rem;font-weight:600;color:var(--fm)}

/* ---------- empty: a search miss or an empty line ---------- */
.fempty{padding:22px 14px;background:var(--fs);border-top:2px solid var(--gold);text-align:center;line-height:1.7}
.fempty .fpill{margin-top:12px}

/* ---------- the station pins on the map: white dots ringed in the line colour; the active one grows and shows its name ---------- */
.pin{position:relative}
.pin span{display:block;width:22px;height:22px;border-radius:50%;border:4px solid var(--lc,var(--gold));background:#fff;box-shadow:0 0 0 2px var(--ground,#1f0309);
  transition:transform .15s ease}
.pin.apwait span{background:var(--ground,#1f0309);border-style:dashed}
.pin b{position:absolute;top:-10px;right:-12px;min-width:18px;height:18px;padding:0 4px;border-radius:8px;background:var(--deep);border:2px solid var(--lc,var(--gold));
  color:var(--ink);font-size:.68rem;font-weight:700;line-height:14px;text-align:center}
.pin em{position:absolute;left:30px;top:50%;display:block;max-width:180px;padding:4px 8px;background:var(--deep);border-left:4px solid var(--lc,var(--gold));color:var(--ink);
  font-size:.8rem;font-style:normal;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  opacity:0;transform:translate(-4px,-50%);transition:opacity .15s ease,transform .15s ease}
.pin.active span{transform:scale(1.4)}
.pin.active em{opacity:1;transform:translate(0,-50%)}
.fstage .leaflet-marker-icon{transition:opacity .3s ease}
.fstage.fhas .leaflet-marker-icon:not(.active){opacity:.7}
.leaflet-marker-icon.active{z-index:1000!important}

/* clusters: a solid disc in the line colour with the Bangla count */
.fcluster span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lc);border:2px solid var(--ground,#1f0309);
  color:var(--deep);font-size:1rem;font-weight:700;line-height:1;cursor:pointer;transition:transform .15s ease}
.fcluster.active span{transform:scale(1.15)}

/* the zoom control, flat */
.fstage .leaflet-bar{border:2px solid var(--fr);border-radius:0;box-shadow:none}
.fstage .leaflet-bar a{background:var(--fs);color:var(--ink);border-color:var(--fr)}

/* ---------- motion: the spine draws down, the stations pop in 30 ms apart (first view and every line change) ---------- */
.fdview.anim .fsts::before{animation:fspine .5s ease-out both}
.fdview.anim .fdot{animation:fpop .25s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--k,0) * 30ms + 80ms)}
@keyframes fspine{from{transform:scaleY(0)}}
@keyframes fpop{from{opacity:0;transform:scale(.3)}}
@media (prefers-reduced-motion:reduce){
  .fdview.anim .fsts::before,.fdview.anim .fdot{animation:none}
  .fdot,.pin span,.pin em,.fcluster span,.fpill,.fgo{transition:none}
}

@media (min-width:900px){
  .fchips{flex-wrap:wrap;margin:14px 0 0;padding:0;overflow:visible}
}

/* ===== css/finder-deck.css ===== */
/* ================= finder: the line deck (one thana card at a time, every width) =================
   Nav row (two 44 px pills around the position), the one-time hint, the card in a view that only pans vertically for the page,
   a row of ticks in the line colours. Flat like the rest: solid tones, no glow. Only transform and opacity animate. */
.fdnav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;margin-bottom:12px}
.fdbtn{width:44px;padding:0}
#finder .fdbtn .ph{font-size:1.3rem;color:var(--gold)}
.fdbtn:disabled{opacity:.4;cursor:default}
.fdpos{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;line-height:1.35}
.fdpos b{font-size:.88rem;font-weight:700;letter-spacing:0;color:var(--gold);font-variant-numeric:tabular-nums}
.fdpos span{max-width:100%;font-size:1.05rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fdhint{display:flex;align-items:center;justify-content:center;gap:8px;margin:-4px 0 12px;font-size:.86rem;line-height:1.4;color:var(--fm);transition:opacity .3s ease}
#finder .fdhint .ph{font-size:1.2rem;color:var(--gold)}
.fdhint.out{opacity:0}

/* the card view: vertical page scroll always belongs to the browser, sideways belongs to the deck */
.fdview{touch-action:pan-y;overflow-x:clip;outline-offset:4px}
.fdview:focus-visible{outline:2px solid var(--ink)}
.fdrag{user-select:none;-webkit-user-select:none}
.fdrag .fln{cursor:grabbing}
.fdview .fln{margin-top:0;border-top-width:4px;will-change:transform}
.fdmap{width:100%}

/* ticks: one per line in the deck, the one in view twice as long; each a 44 px tall target */
.fticks{display:flex;justify-content:center;margin-top:6px}
.ftick{flex:1 1 0;max-width:24px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer}
.ftick span{display:block;width:4px;height:12px;background:var(--lc);opacity:.55;transition:transform .2s ease,opacity .2s ease}
.ftick[aria-current="true"] span{opacity:1;transform:scaleY(2)}
.fticks:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}

/* sync: the badge of the card in view wears an outline ring (the filled state stays for a chosen line); other lines' pins dim */
.fchips{padding-block:5px 7px}
.fchip.fcur{outline:2px solid var(--lc,var(--gold));outline-offset:3px}
.fstage .leaflet-marker-icon.fdim:not(.active){opacity:.45}

@media (prefers-reduced-motion:reduce){
  .fdhint,.ftick span{transition:none}
}

/* ===== css/finder-bar.css ===== */
/* ================= finder: the search bar, the thana list and the search dropdown (js/finder-bar.js) =================
   8 Oct, Nayan's picks: C1 (campaign pills, the chosen thing campaign yellow) and S2 / G2 (one pill: [থানা ▾] 🔍 search [→]).
   The thana pill and the arrow are both 42 px, 7 px in from the pill's ends, 10 px apart from what sits next to them.
   Controls to the map: 22 px. The row of line badges is hidden: the list opens from the pill. */

#finder .fchips{display:none}
#finder .fctl{margin-bottom:22px}
.fsearch{flex-wrap:wrap;align-items:stretch;gap:10px}

/* ---------- the pill ---------- */
.fbar{position:relative;flex:1 1 100%;min-width:0;display:flex;align-items:center;gap:10px;height:56px;padding:0 6px;
  border:1.5px solid var(--line);border-radius:999px;background:rgba(20,2,8,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fbar:focus-within{border-color:var(--gold)}
.fseg{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px 0 14px;margin-right:2px;border:0;border-radius:999px;
  background:linear-gradient(90deg,#ffe066,#ffb300);color:#5a1a00;font:inherit;font-size:.9rem;font-weight:700;white-space:nowrap;cursor:pointer}
.fseg span{max-width:8em;overflow:hidden;text-overflow:ellipsis}
#finder .fseg .ph{color:#5a1a00;font-size:1rem}
#finder .fbari{flex:0 0 auto;color:var(--gold);font-size:1.15rem;opacity:.85}
#finder .fbar input{flex:1;min-width:0;height:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);font-size:1rem}
#finder .fbar input::placeholder{color:rgba(255,244,224,.5)}
.fbar input::-webkit-search-cancel-button{filter:grayscale(1)}
@media (max-width:359px){#finder .fbari{display:none}.fseg{padding:0 10px 0 12px}}   /* 320 px phones: the typing room comes first */
#finder .fbar .fgo{flex:0 0 42px;width:42px;height:42px;background:linear-gradient(90deg,#ffe066,#ffb300);color:#5a1a00;box-shadow:0 4px 12px rgba(255,170,0,.4)}

/* ---------- আমার কাছাকাছি: a glass pill like the bar ---------- */
#finder .fnear{min-height:52px;border:1.5px solid var(--line);background:rgba(20,2,8,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ---------- the count, one size down, on one line with what it counts ---------- */
#finder .fline{align-items:baseline;gap:4px 12px;margin-top:16px}
#finder .fcount b{font-size:clamp(2.6rem,11vw,3.6rem)}
#finder .fscope{flex:1 1 auto}
@media (min-width:900px){#finder .fcount b{font-size:3.6rem}}

/* ---------- the thana list and the search dropdown: glass panels under the pill ---------- */
.fmenu,.fdrop{position:relative;z-index:40;flex:1 1 100%;margin-top:-4px;padding:6px;border-radius:20px;border:1.5px solid var(--line);
  background:rgba(20,2,8,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.fmenu{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-height:min(360px,60vh);overflow:auto;overscroll-behavior:contain}
.fmenu[hidden],.fdrop[hidden]{display:none}
.fmenu button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px 0 6px;border:0;border-radius:999px;background:none;color:var(--ink);
  font:inherit;font-size:.9rem;font-weight:600;text-align:left;cursor:pointer}
.fmenu button b{margin-left:auto;font-weight:500;color:var(--fm)}
.fmenu button[aria-selected="true"]{background:linear-gradient(90deg,#ffe066,#ffb300);color:#5a1a00}
.fmenu button[aria-selected="true"] b{color:#5a1a00}
.fmenu .fbadge{border-radius:999px;min-width:26px;height:26px}
#finder .fmenu .ph{color:var(--gold);margin:0 4px}
.fdrop{display:grid;gap:2px}
.fdrop button{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 12px;border:0;border-radius:14px;background:none;color:var(--ink);
  font:inherit;text-align:left;cursor:pointer}
.fmenu button:hover,.fdrop button:hover,.fmenu button:focus-visible,.fdrop button:focus-visible{background:rgba(255,210,122,.12)}
#finder .fdrop .ph{flex:0 0 auto;font-size:1.2rem;color:var(--gold)}
.fdrop span{display:grid;min-width:0}
.fdrop b{font-weight:600;font-size:.98rem;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fdrop small{font-size:.8rem;line-height:1.4;color:var(--fm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fdrop .fdth{background:rgba(255,210,122,.08)}
.fdrop .fdall{justify-content:center;min-height:46px;margin-top:2px;border-radius:999px;background:linear-gradient(90deg,#ffe066,#ffb300);
  color:#5a1a00;font-weight:700;font-size:.92rem}
.fdrop .fdall:hover{background:linear-gradient(90deg,#ffe066,#ffb300);filter:brightness(1.04)}
#finder .fdrop .fdall .ph{color:#5a1a00;font-size:1rem}
.fdnone{margin:6px 10px 4px;font-size:.92rem;line-height:1.5}

.fdrop{overflow:auto;overscroll-behavior:contain}
html.fsopen .sndmute{opacity:0!important;pointer-events:none}   /* the splash's mute button steps aside while a panel is open */

/* searching: the card shows results, so the whole line's walk is left out */
#finder.fsearching .flhw{display:none}

/* ---------- light ---------- */
html[data-theme="light"] .fbar,html[data-theme="light"] #finder .fnear{background:#fff;border-color:rgba(245,160,0,.55)}
html[data-theme="light"] #finder .fbar input::placeholder{color:#8a6a5c}
html[data-theme="light"] #finder .fbar:focus-within{border-color:var(--saff)}
html[data-theme="light"] .fmenu,html[data-theme="light"] .fdrop{background:#fff;border-color:rgba(245,160,0,.55);box-shadow:0 14px 30px rgba(120,50,20,.18)}
html[data-theme="light"] .fmenu button:hover,html[data-theme="light"] .fdrop button:hover{background:rgba(245,160,0,.1)}
html[data-theme="light"] .fdrop .fdth{background:rgba(245,160,0,.08)}
html[data-theme="light"] .fdrop .fdall{background:#e0162b;color:#fff;box-shadow:0 6px 16px rgba(224,22,43,.3)}   /* yellow melts into cream (Nayan, b) */
html[data-theme="light"] #finder .fdrop .fdall .ph{color:#fff}

/* ===== css/splash-video.css ===== */
/* Puja 2026 splash v3: real aarti clip, lit from dark to light.
   One variable, --lit (0 = dark mandap, 1 = fully lit), is written by splash-video.js from the
   video's own clock; every light layer below reads it, so light always matches the picture. */
@property --lit{syntax:"<number>";inherits:true;initial-value:0}
html{background:var(--deep)}

#splash{--lit:0;--bloom:0;--bmin:.72;position:fixed;inset:0;z-index:100;height:100dvh;overflow:hidden;background:#070103;color:var(--ink);
  transition:opacity .9s ease,visibility .9s}
#splash.gone{opacity:0;visibility:hidden}

/* the picture: a still underneath (shown if the video cannot play), the clip on top */
#splash .sp3-still,#splash .sp3-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
#splash .sp3-still{background:url("../media/aarti-9x16-end.webp") 50% 40%/cover no-repeat}
#splash .sp3-still,#splash .sp3-video{
  filter:brightness(calc(var(--bmin) + (1 - var(--bmin)) * var(--lit))) saturate(calc(.75 + .25 * var(--lit))) contrast(calc(1.12 - .12 * var(--lit)))}
#splash.video-on .sp3-still{opacity:0}

/* darkness that opens from the aarti lamp: a pool of light grows until it covers the screen */
#splash .sp3-dark{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 42% 78%,
    rgba(7,1,3,0) calc(var(--lit) * 150%),
    rgba(7,1,3,.55) calc(var(--lit) * 150% + 18%),
    rgba(7,1,3,.94) calc(var(--lit) * 150% + 42%))}
/* warm lamp colour laid over the picture, strongest mid-transition */
#splash .sp3-warm{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(120% 90% at 42% 80%,rgba(255,170,70,.9),rgba(179,18,43,.25) 60%,transparent 85%);
  opacity:calc(.55 * (1 - var(--lit)))}
/* final bloom: gold light fills the frame, the site fades in from it */
#splash .sp3-bloom{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 38%,#fff9ec 0%,#ffe2a0 30%,#ffc15a 62%,rgba(255,140,50,.85) 100%);
  opacity:var(--bloom)}
/* grain + vignette, one fixed layer, never animated */
#splash::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(5,1,2,.72) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.18;mix-blend-mode:soft-light}

/* ---------- words + controls ---------- */
.sp3-title{position:relative;margin:0;text-align:center;font-family:'Mahin Alapan','FN Mahin Rafid','Noto Serif Bengali',serif;
  font-size:clamp(2.1rem,6.5vw,3.6rem);line-height:1.35;color:var(--gold);text-shadow:0 2px 26px rgba(255,140,40,.7),0 0 2px rgba(0,0,0,.8);
  opacity:calc(clamp(0, calc((var(--lit) - .3) * 2.5), 1) * (1 - var(--bloom)));translate:0 calc((1 - var(--lit)) * 10px)}
/* skip: a quiet text link under the diyas, in the column the eye is already on (title, lamps, link) */
.sp3-skip{position:relative;z-index:5;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:2px;padding:4px 6px;
  border:0;border-bottom:1.5px solid var(--gold);border-radius:0;background:none;color:var(--ink);font:600 1.05rem 'Hind Siliguri',sans-serif;
  cursor:pointer;text-shadow:0 1px 6px rgba(0,0,0,.6);transition:color .2s}
.sp3-skip .sp3-arrow{position:static;display:block;width:18px;height:18px;color:var(--gold);transition:translate .2s}
.sp3-skip:hover{color:var(--gold)}
.sp3-skip:hover .sp3-arrow{translate:3px 0}
.sp3-foot{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:90px 16px calc(18px + env(safe-area-inset-bottom));
  display:grid;justify-items:center;gap:12px;background:linear-gradient(180deg,transparent,rgba(8,1,3,.78) 60%)}
/* nine clay diyas, lit centre-first by splash-video.js (li.lit); each is a bowl (li), a flame (::before),
   a white-hot core (<i>) and a halo (::after); only transform, scale and opacity ever animate */
#splash{--diya-clay:#b5673a;--diya-rim:#d9955e;--diya-shade:#5a2210;--flame-core:#fff4d6;--flame-mid:#ffc44d;--flame-edge:#ff7a1a;--flame-glow:rgba(255,166,60,.75)}
.sp3-diyas{position:relative;display:flex;align-items:flex-end;gap:clamp(8px,2.2vw,16px);list-style:none;margin:0;padding:calc(clamp(22px,6vw,34px) * .62) 0 0}
/* one warm pool of light on the ground under the whole row, as bright as the mandap is lit */
.sp3-diyas::after{content:"";position:absolute;left:0;top:100%;width:100%;height:18px;margin-top:-9px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,150,50,.35),transparent);opacity:var(--lit)}
/* the bowl: a 3px clear band on top carries the dark wick nub, the clay starts at the lip below it */
.sp3-diyas li{position:relative;isolation:isolate;box-sizing:content-box;width:clamp(22px,6vw,34px);aspect-ratio:100/42;
  border-top:3px solid transparent;border-radius:0 0 55% 55% / 0 0 100% 100%;opacity:.55;transition:opacity .6s ease;
  background:linear-gradient(#2b0f06,#2b0f06) 50% 0/2px 3px no-repeat border-box,
    radial-gradient(90% 70% at 50% 0,var(--diya-rim),transparent 70%) padding-box,
    linear-gradient(180deg,var(--diya-clay) 30%,var(--diya-shade)) padding-box;
  box-shadow:inset 0 1px 0 rgba(255,214,160,.45),inset 0 -3px 4px rgba(40,10,2,.6),0 2px 3px rgba(0,0,0,.5)}
.sp3-diyas li.lit{opacity:1;
  background:linear-gradient(#2b0f06,#2b0f06) 50% 0/2px 3px no-repeat border-box,
    radial-gradient(90% 80% at 50% 0,#ffd9a3,var(--diya-rim) 35%,transparent 75%) padding-box,
    linear-gradient(180deg,var(--diya-clay) 30%,var(--diya-shade)) padding-box}
/* flame + core grow from the wick; the flicker rides on transform so it never fights the scale-in */
.sp3-diyas li::before,.sp3-diyas li i{content:"";position:absolute;bottom:100%;aspect-ratio:34/58;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;transform-origin:50% 100%;scale:0;transition:scale .42s cubic-bezier(.3,1.5,.5,1)}
.sp3-diyas li::before{left:33%;width:34%;
  background:radial-gradient(90% 75% at 50% 100%,var(--flame-core) 0 18%,var(--flame-mid) 48%,var(--flame-edge) 88%);
  box-shadow:0 0 6px 1px rgba(255,170,60,.6)}
.sp3-diyas li i{left:42.35%;width:15.3%;margin-bottom:1px;background:radial-gradient(50% 50% at 50% 60%,var(--flame-core) 45%,transparent 100%)}
/* halo: 2.4x the bowl, centred on the flame (margins in % of width), behind the clay */
.sp3-diyas li::after{content:"";position:absolute;z-index:-1;top:0;left:-70%;width:240%;aspect-ratio:1;margin-top:-149%;pointer-events:none;
  background:radial-gradient(closest-side,var(--flame-glow),transparent);opacity:0;transition:opacity .6s ease}
.sp3-diyas li.lit::before,.sp3-diyas li.lit i{scale:1;
  animation:diyaFlicker calc(1.15s + var(--i,0) * .07s) ease-in-out calc(var(--i,0) * -.23s) infinite}
.sp3-diyas li.lit::after{opacity:1;animation:diyaFlickerHalo calc(1.15s + var(--i,0) * .07s) ease-in-out .6s infinite}
@keyframes diyaFlicker{
  0%,100%{transform:skewX(0) scale(1,1)} 25%{transform:skewX(-2deg) scale(1.03,.96)}
  55%{transform:skewX(1.5deg) scale(.97,1.04)} 80%{transform:skewX(2deg) scale(1.01,.99)}}
@keyframes diyaFlickerHalo{0%,100%{opacity:1} 40%{opacity:.8} 70%{opacity:.93}}
@media (prefers-reduced-motion:reduce){.sp3-diyas li.lit::before,.sp3-diyas li.lit i,.sp3-diyas li.lit::after{animation:none}}
.sp3-skip:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* one clip per shape: phones play the 9:16 clip, every wider screen plays the 16:9 clip; both fill
   the frame (cover), and the still underneath is the matching clip's last frame */
@media (max-aspect-ratio:3/4){
  .sp3-title{font-size:clamp(2.4rem,11vw,3.2rem)}
}
@media (min-aspect-ratio:3/4){
  #splash .sp3-still{background:url("../media/aarti-16x9-end.webp") 50% 40%/cover no-repeat}
}

/* sound toggle (js/sound-toggle.js): same glass and gold as the nav's theme switch; above the splash and the music bar */
.sndmute{position:fixed;z-index:110;left:16px;bottom:calc(16px + env(safe-area-inset-bottom) + var(--musicbar-h));width:44px;height:44px;
  display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(42,4,16,.62);color:var(--gold);
  font-size:1.3rem;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .25s,background .2s,bottom .3s}
.sndmute:hover{background:rgba(74,8,26,.78)}
.sndmute:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sndmute.out{opacity:0;pointer-events:none}
.sndmute.onsplash{top:calc(14px + env(safe-area-inset-top));bottom:auto;left:14px}   /* level with Skip on the splash */
.sndmute .ph{position:static;inset:auto;display:block;border-radius:0;opacity:1;transition:none;line-height:1}   /* not the hero's photo .ph */
@media (prefers-reduced-motion:reduce){.sndmute{transition:none}}

/* ===== css/reviews.css ===== */
/* ================= reviews: voices first, the lamp to speak =================
   Base rules are the phone (390 px). Wider screens come in min-width queries at the end. */
#rv [hidden],.rvsheet [hidden]{display:none!important}
html:has(.rvsheet[open]){overflow:hidden}

/* ---------- summary strip: the average, then the pandal leaderboard "সেরা মণ্ডপ" ---------- */
.rvsum{display:flex;flex-direction:column;align-items:center;gap:14px;margin:-.8rem 0 18px}
.rvavg{display:flex;align-items:center;justify-content:center;gap:6px 16px}
.rvsum .avg{font-size:clamp(2.6rem,10vw,4rem);line-height:1.25;padding-top:.15em;color:var(--gold);text-shadow:0 0 28px rgba(255,170,60,.5)}
.rvsub{display:grid;gap:4px;justify-items:start}
.rvmeter{position:relative;display:inline-block;font-size:1.3rem;line-height:1;letter-spacing:3px;color:rgba(255,207,90,.25)}
.rvmeter span{position:absolute;inset:0 auto 0 0;width:var(--f);overflow:hidden;white-space:nowrap;color:#ffcf5a}
.rvmeter.sm{font-size:.7rem;letter-spacing:1px}
.rvn{font-size:.9rem;opacity:.85}
.rvrank{display:grid;gap:5px;width:100%;max-width:340px}
.rvrkh{margin:0 0 2px;text-align:center;font-size:1.05rem;line-height:1.5;color:var(--gold)}
/* .rvrank scopes the row: the sheet has its own .rvrow for the name and puja fields */
.rvrank .rvrow{display:grid;grid-template-columns:1.3em minmax(0,1fr) auto auto auto auto;align-items:center;gap:0 8px;width:100%;min-height:44px;padding:0 12px;
  border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:#ffe9b0;font:inherit;font-size:.85rem;line-height:1.3;text-align:left;cursor:pointer}
.rvrank .rvrow[aria-pressed="true"]{border-color:var(--gold);background:rgba(255,210,122,.08);box-shadow:0 0 0 1px var(--gold),0 0 18px rgba(255,170,60,.25)}
.rvrank .rvrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rvrk{font-size:1.1rem;line-height:1;padding-top:.12em;text-align:center;color:var(--gold)}
.rvpn{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rvra{font-weight:600;color:var(--gold)}
.rvrank em{font-style:normal;font-size:.78rem;opacity:.75}
.rvrank .rvdiya{position:relative;inset:auto}
.rvclear{display:block;margin:-6px auto 4px;padding:7px 14px;border-radius:99px;border:1px solid var(--gold);background:rgba(255,210,122,.12);
  color:#ffe9b0;font:inherit;font-size:.8rem;line-height:1.3;cursor:pointer}
.rvclear:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- carousel of voices: a centred card sits forward, its neighbours sit back ---------- */
.rvstage{position:relative}
.rvtrack{display:flex;align-items:stretch;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:10px 16px 24px;
  scrollbar-width:none;overscroll-behavior-x:contain;outline:none}
.rvtrack::-webkit-scrollbar{display:none}
.rvtrack:focus-visible{box-shadow:inset 0 0 0 2px var(--line);border-radius:20px}
.rvnav{display:none}

/* the card is a lit offering: warm glass ramp, lamp light from the diya corner, alpona rings behind the quote mark */
.rvcard{position:relative;isolation:isolate;flex:0 0 84vw;max-width:360px;scroll-snap-align:center;display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;
  border-radius:20px;background:linear-gradient(180deg,rgba(60,10,22,.62),rgba(34,5,14,.58));border:1px solid var(--line);backdrop-filter:blur(10px);
  transform:scale(.92);opacity:.55;transition:transform .4s ease,opacity .4s ease}
.rvcard::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(circle at calc(100% - 25px) 24px,rgba(255,170,60,.22),transparent 55%);box-shadow:0 0 0 1px var(--gold),0 14px 40px rgba(0,0,0,.35)}
.rvcard::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:repeating-radial-gradient(circle at 34px 30px,rgba(255,210,122,.06) 0 1px,transparent 1px 9px);
  -webkit-mask-image:radial-gradient(circle at 34px 30px,#000 0 36px,transparent 110px);mask-image:radial-gradient(circle at 34px 30px,#000 0 36px,transparent 110px)}
.rvcard.on{transform:translateY(-4px);opacity:1}                            /* fallback depth, and the lamp and rim for every browser */
.rvcard.on::before{opacity:1}
.rvq{position:absolute;top:2px;left:14px;font-size:3.2rem;line-height:1;color:var(--gold);opacity:.55;pointer-events:none}
.rvcard blockquote{margin-top:22px;max-height:calc(1.7em * 6 + .15em);overflow:hidden;padding:.15em 22px 0 0;font-size:1.12rem;line-height:1.7;color:#fff4e0;word-break:break-word}
.rvcard blockquote.clip{-webkit-mask-image:linear-gradient(#000 calc(100% - 1.7em),transparent);mask-image:linear-gradient(#000 calc(100% - 1.7em),transparent)}
.rstar{color:#ffcf5a;letter-spacing:1px}
.rstar .off{opacity:.25}
.rvby{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-top:12px;border-top:1px solid rgba(255,210,122,.16);font-size:.86rem}
.rvinit{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;padding-top:.12em;border-radius:50%;border:1.5px solid transparent;font-size:1rem;line-height:1;color:var(--gold);
  background:linear-gradient(#3d0917,#260510) padding-box,linear-gradient(135deg,#ffe9b0,#ffb347 55%,#b5673a) border-box}
.rvby b{color:#fff4e0;font-weight:600}
.rvby time{margin-left:auto;font-size:.82rem;color:rgba(255,244,224,.7)}
.rvtag{padding:1px 9px;border-radius:99px;font-size:.75rem;background:rgba(255,210,122,.12);border:1px solid var(--line);color:#ffe9b0}
.rvcard.fresh{animation:rvfresh 1.2s ease-out}

/* depth driven by the scroll itself where supported (JS adds .sd after CSS.supports) */
.rvtrack.sd .rvcard:not(.skeleton){animation:rvdepth linear both;animation-timeline:view(inline);animation-range:cover}
.rvtrack.sd .rvcard.fresh{animation:rvdepth linear both,rvfresh 1.2s ease-out;animation-timeline:view(inline),auto;animation-range:cover,normal}
@keyframes rvdepth{0%,32%{transform:scale(.92);opacity:.55}50%{transform:translateY(-4px);opacity:1}68%,100%{transform:scale(.92);opacity:.55}}
@keyframes rvfresh{0%{box-shadow:0 0 0 1px var(--gold),0 0 0 0 rgba(255,190,80,.7)}100%{box-shadow:0 0 0 1px var(--gold),0 0 0 18px rgba(255,190,80,0)}}

/* the diya mark: dim clay lamp, the flame lights when its card is the snapped one */
.rvdiya{position:absolute;top:14px;right:14px;width:22px;height:20px;pointer-events:none}
.rvdiya::before{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;border-radius:2px 2px 12px 12px;background:linear-gradient(#d9955e,#b5673a 55%,#5a2210)}
.rvdiya::after{content:"";position:absolute;left:50%;bottom:7px;width:8px;height:12px;margin-left:-4px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 72%,#fff4d6,#ffc44d 50%,#ff7a1a);opacity:.22;filter:grayscale(.7);transition:opacity .4s ease,filter .4s ease,box-shadow .4s ease}
.rvcard.on .rvdiya::after,.rvdiya.lit::after{opacity:1;filter:none;box-shadow:0 -2px 14px 5px rgba(255,166,60,.7);animation:rvflick 2.6s ease-in-out infinite}
@keyframes rvflick{50%{scale:1 1.12}}

/* loading: three cards shaped like the real one */
.rvcard.skeleton{min-height:188px;gap:12px;transform:none;opacity:1}
.rvcard.skeleton i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(255,210,122,.07),rgba(255,210,122,.2),rgba(255,210,122,.07)) 0 0/200% 100%;animation:rvshim 1.4s linear infinite}
.rvcard.skeleton i:nth-child(2){width:88%}
.rvcard.skeleton i:nth-child(3){width:62%}
.rvcard.skeleton i.s{width:42%;margin-top:auto}
@keyframes rvshim{to{background-position:-200% 0}}

/* "more" card sits at the end of the row */
.rvmore{align-items:center;justify-content:center;gap:4px;min-height:188px;border-style:dashed;font:inherit;font-weight:600;color:var(--gold);cursor:pointer}
.rvmore small{font-weight:400;font-size:.8rem;color:var(--ink);opacity:.7}

/* progress line that follows the swipe, on every width */
.rvprog{width:min(38%,150px);height:3px;margin:8px auto 0;border-radius:3px;background:rgba(255,210,122,.16);overflow:hidden}
.rvprog i{display:block;height:100%;border-radius:3px;background:var(--gold);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .15s linear}

/* error and empty faces */
.rvstate{display:grid;justify-items:center;gap:14px;padding:26px 16px;text-align:center;border:1px dashed var(--line);border-radius:20px;line-height:1.7}

/* ---------- the lamp to speak ---------- */
/* 8 Oct (Nayan's R1): the hero's map ticket with a star in a speech bubble; the button itself is only a frame */
.rvcta{display:flex;justify-content:center;width:100%;margin:22px auto 0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.rvcta .aptk{width:min(100%,400px)}
.rvcta:hover .aptk{transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,170,0,.55)}
.rvcta:active .aptk{transform:scale(.97)}
.rvcta:focus-visible{outline:none}
.rvcta:focus-visible .aptk{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:359px){.rvcta .aptk{padding-left:12px;gap:8px}.rvcta .mt-tag{padding:6px 10px}}
/* the icons that replaced emoji: not the hero's photo .ph */
:is(.rvtag,.rvsend) .ph{position:static;inset:auto;display:inline-block;border-radius:0;opacity:1;transition:none;line-height:1}
.rvtag .ph{margin-right:4px;color:var(--gold);vertical-align:-1px}
.rvsend .ph{font-size:1.1rem}

/* ---------- review sheet: bottom sheet on phones ---------- */
.rvsheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:88dvh;padding:0;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--line);border-bottom:0;border-radius:26px 26px 0 0;color:var(--ink);
  background:linear-gradient(180deg,#420a1b,#20030b 70%);box-shadow:0 -20px 60px rgba(0,0,0,.55)}
.rvsheet::backdrop{background:rgba(42,4,16,.7);backdrop-filter:blur(6px)}
.rvsheet[open]{animation:rvup .26s ease-out}
.rvsheet[open]::backdrop{animation:rvfade .26s ease-out}
.rvsheet.out{animation:rvdown .18s ease-in forwards}
.rvsheet.out::backdrop{animation:rvfadeout .18s ease-in forwards}
@keyframes rvup{from{transform:translateY(100%)}}
@keyframes rvdown{to{transform:translateY(100%)}}
@keyframes rvfade{from{opacity:0}}
@keyframes rvfadeout{to{opacity:0}}

.rvform{position:relative;display:grid;gap:12px;padding:10px 18px calc(20px + env(safe-area-inset-bottom))}
.rvhandle{justify-self:center;width:36px;height:4px;border-radius:2px;background:rgba(255,210,122,.45)}
.rvx{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--ink);font:inherit;font-size:1.1rem;cursor:pointer;opacity:.8}
.rvx:hover,.rvx:focus-visible{opacity:1;background:rgba(255,255,255,.08)}
.rvidle{display:grid;gap:12px}
.rvsheet h3{font-size:1.35rem;line-height:1.5;padding:.15em 44px 0 0;color:var(--gold);font-weight:400}
.rvlbl{min-height:1.5em;font-size:.95rem;font-weight:600;color:#ffe9b0}
.rvstars{display:flex;gap:6px;margin-top:-6px}
.rvstar{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:12px;background:none;font:inherit;font-size:1.9rem;line-height:1;
  color:rgba(255,207,90,.28);cursor:pointer;transition:color .2s,transform .2s}
.rvstar.sel{color:#ffcf5a;text-shadow:0 0 14px rgba(255,190,80,.5)}
.rvstar:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.rvstar:active{transform:scale(.9)}
.rvprob,.rvfail{font-size:.86rem;line-height:1.55;color:#ffb8a8}
.rvprob{margin-top:-6px}
.rvrow{display:grid;gap:8px}
.rvrow select{min-width:0;width:100%}
.rvsheet textarea{width:100%;min-height:96px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.38);color:#fff;font:inherit;resize:vertical;outline:none}
.rvsheet textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,210,122,.2)}
.rvsheet textarea::placeholder{color:#d9bfa0}
.rvcount{justify-self:end;margin-top:-8px;font-size:.78rem;opacity:.7}
.rvcount.hi{opacity:1;color:var(--gold)}
.rvhp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rvsend{width:100%;justify-content:center;padding:14px 24px}
.rvsend:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.rvwait{text-align:center;font-size:.84rem;opacity:.85}
.rvfine{text-align:center;font-size:.76rem;line-height:1.6;opacity:.6}
.rvdone{display:grid;justify-items:center;gap:18px;padding:40px 8px 34px;text-align:center}
.rvdone .rvdiya{position:relative;inset:auto;scale:2.2;margin:10px 0 6px}
.rvdone p{font-size:1.25rem;line-height:1.7;color:#ffe9b0}

/* ---------- wider phones: name and puja share a row ---------- */
@media (min-width:390px){.rvrow{grid-template-columns:1fr 1fr}}

/* ---------- tablet and up: the sheet becomes a centred card ---------- */
@media (min-width:700px){
  .rvsheet{inset:0;margin:auto;max-width:520px;border-bottom:1px solid var(--line);border-radius:26px}
  .rvsheet[open]{animation:rvpop .26s ease-out}
  .rvsheet.out{animation:rvpopout .18s ease-in forwards}
  .rvhandle{display:none}
  .rvform{padding:18px 24px 24px}
  @keyframes rvpop{from{opacity:0;transform:translateY(24px) scale(.98)}}
  @keyframes rvpopout{to{opacity:0;transform:translateY(16px) scale(.98)}}
}

/* ---------- desktop: still a carousel, three cards in view, round arrows outside the track ---------- */
@media (min-width:900px){
  .rvsum{flex-direction:row;justify-content:center;gap:44px}
  .rvstage{padding:0 60px}
  .rvtrack{gap:16px;margin:0;padding:10px 0 24px}
  .rvcard{flex:0 0 calc((100% - 32px) / 3);max-width:none}
  .rvnav{position:absolute;top:calc(50% - 7px);z-index:2;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0 0 4px;border-radius:50%;
    border:1px solid var(--line);background:var(--glass);color:var(--gold);font:inherit;font-size:1.7rem;line-height:1;cursor:pointer;backdrop-filter:blur(8px);transition:opacity .2s,transform .2s}
  #rvprev{left:0}
  #rvnext{right:0}
  .rvnav:hover:not(:disabled){transform:scale(1.08)}
  .rvnav:disabled{opacity:.3;cursor:default}
  .rvnav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
}

/* ---------- reduced motion: no slide, fade only; no flame flicker ---------- */
@media (prefers-reduced-motion:reduce){
  .rvsheet[open]{animation:rvfade .2s ease-out!important}
  .rvsheet.out{animation:rvfadeout .18s ease-in forwards!important}
  .rvdiya::after{animation:none!important}
  .rvcard,.rvcard::before,.rvnav{transition:none!important}
}

/* ================= the endless slider (js/reviews-marquee.js, 8 Oct, Nayan's M3) =================
   Full width, two rows of compact cards running opposite ways. The one-card track stays for screen readers, visually hidden. */
.rv.mq .rvstage{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rv.mq .rvprog{display:none!important}
.rv.mq .rvsum{margin-bottom:10px}
.rv.mq .rvcta{margin-top:4px}   /* with the slider's 4/10 px padding and the cards' own 8 px: 22 px above and below the cards */
.rvmq{position:relative;width:100vw;margin:0 0 0 calc(50% - 50vw);overflow:hidden;display:grid;gap:14px;padding:4px 0 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rvmrow{display:flex;width:max-content;animation:rvMq var(--d,60s) linear infinite}
.rvmrow.rev{animation-direction:reverse}
.rvmrow>div{display:flex;gap:14px;padding-right:14px}   /* each copy carries its own trailing gap, so -50% lands exactly on the second copy */
@keyframes rvMq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rvmq:hover .rvmrow,.rvmq.hold .rvmrow{animation-play-state:paused}
/* it keeps moving with Reduce Motion on (his call); this beats the page's global animation:none */
@media (prefers-reduced-motion:reduce){
  .rvmrow{animation:rvMq var(--d,60s) linear infinite!important}
  .rvmq:hover .rvmrow,.rvmq.hold .rvmrow{animation-play-state:paused!important}
}
.rvmq .rvcard{flex:0 0 240px;max-width:none;padding:14px 14px 12px;gap:6px;scroll-snap-align:none}
.rvmq .rvcard blockquote{margin-top:14px;max-height:calc(1.6em * 3);font-size:.98rem;line-height:1.6}
.rvmq .rvtag{display:none}

/* ================= সেরা পূজা / মণ্ডপ / প্রতিমা (8 Oct, Nayan's B2) and the site rating under it ================= */
.rvsum .rvbest{order:0;display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:10px;width:100%;max-width:none;overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none;overscroll-behavior-x:contain}
.rvsum .rvbest::-webkit-scrollbar{display:none}
@media (min-width:900px){.rvsum .rvbest{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);max-width:900px;overflow:visible}}
.rvsum .rvavg{order:1;gap:4px 10px}
.rvsum .rvavg .avg{font-size:1.6rem;text-shadow:none}
.rvsum .rvavg .rvn::before{content:"সাইটের রেটিং · "}
@media (min-width:900px){.rvsum{flex-direction:column;gap:14px}}
.rvbc{scroll-snap-align:start;padding:12px 14px 8px;border-radius:18px;border:1px solid var(--line);background:rgba(20,2,8,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:left}
.rvbh{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-family:'Mahin Alapan',serif;font-weight:400;font-size:1.3rem;line-height:1.4;color:var(--gold)}
.rvbh .ph{position:static;inset:auto;display:inline-block;border-radius:0;opacity:1;transition:none;line-height:1}
.rvbr{display:grid;grid-template-columns:1.2em minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;min-height:40px;padding:4px 6px;
  border:0;border-top:1px solid rgba(255,210,122,.14);border-radius:0;background:none;color:var(--ink);font:inherit;font-size:.88rem;text-align:left;cursor:pointer}
.rvbr b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvbr em{font-style:normal;color:var(--gold);font-weight:700;white-space:nowrap}
.rvbk{color:var(--gold);font-weight:700}
.rvbr.top b{color:var(--gold)}
.rvbr[aria-pressed="true"]{background:rgba(255,210,122,.12);border-radius:10px}
.rvbr:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.rvbnone{display:grid;justify-items:start;gap:8px;margin:4px 0 6px;font-size:.88rem;opacity:.85}
.rvbgo{min-height:36px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:none;color:var(--gold);font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
html[data-theme="light"] .rvbc{background:#fff;border-color:rgba(245,160,0,.45)}
html[data-theme="light"] :is(.rvbh,.rvbr.top b){color:#c8102e}
html[data-theme="light"] :is(.rvbr em,.rvbk,.rvbgo){color:#8a4b00}

/* the form: "কী সেরা লাগল?" chips */
.rvbestf{display:grid;gap:8px;margin:2px 0 4px}
.rvbestf small{font-weight:400;opacity:.7}
.rvchips{display:flex;flex-wrap:wrap;gap:8px}
.rvchips button{min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:rgba(20,2,8,.45);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.rvchips button[aria-pressed="true"]{background:linear-gradient(90deg,#ffe066,#ffb300);border-color:transparent;color:#5a1a00}
.rvchips button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
html[data-theme="light"] .rvchips button:not([aria-pressed="true"]){background:#fff;border-color:rgba(245,160,0,.55)}

/* the review text in Hind Siliguri (8 Oct, Nayan's F1): the lettering face was hard to read at card size */
.rvcard blockquote{font-family:'Hind Siliguri',sans-serif;font-weight:500}
.rvmq .rvcard blockquote{line-height:1.65;max-height:calc(1.65em * 3)}

/* ===== css/light.css ===== */
/* ================= light mode: the same page on a cream festive ground =================
   Loaded last by index.html; every rule waits for html[data-theme="light"] (set by the head script and js/theme.js).
   The :where() prefix adds no specificity, so each override wins or loses exactly as it did as a plain light-only sheet.
   Remaps the colour tokens, then overrides the colours the other sheets hard-code.
   --gold becomes an amber INK (AA on cream and white); filled accents use --saff. --deep stays a dark maroon: it is the ink on
   filled accents. The splash keeps its own dark night look and hands over to the cream page when it fades. */
html[data-theme="light"]{
  --cream:#fff8ec;--cream2:#fcebd0;--white:#fff;
  --gold:#8a4b00;--gold2:#e08a00;--saff:#f5a000;--saff-l:#ffc94a;--red:#b3122b;--crimson:#c8102e;--maroon:#5e0b1c;
  --deep:#3d0712;--ink:#3d0712;--ink2:#6b3a2e;
  --glass:rgba(255,255,255,.9);--line:rgba(150,70,30,.24);
  --fill:linear-gradient(135deg,#ffd36b,#f5a000);
}
html[data-theme="light"]{background:var(--cream)}
html[data-theme="light"] body{background:var(--cream);color:var(--ink)}
:where(html[data-theme="light"]) #splash{--ink:#fff4e0;--gold:#ffd27a;--deep:#2a0410}

/* ---------- photo background behind a cream veil ---------- */
:where(html[data-theme="light"]) #bg{background:radial-gradient(circle at 50% 30%,#fff1d6,var(--cream) 70%)}
:where(html[data-theme="light"]) .slide .pan{opacity:.55;filter:saturate(.9)}
:where(html[data-theme="light"]) .slide .pan.f{filter:blur(16px) saturate(.9)}
:where(html[data-theme="light"]) #veil{background:
  radial-gradient(ellipse at 50% 32%,rgba(255,190,90,.22),transparent 55%),
  linear-gradient(180deg,rgba(255,248,236,.72),rgba(255,248,236,.5) 35%,rgba(255,248,236,.88))}

/* ---------- hero + countdown ---------- */
:where(html[data-theme="light"]) .om{color:var(--red)}
/* the title in sindoor red, solid (Nayan, 8 Oct): the gold gradient faded into the cream; h1.serif matches index.html's specificity */
:where(html[data-theme="light"]) h1,:where(html[data-theme="light"]) h1.serif{background:none;-webkit-background-clip:border-box;background-clip:border-box;
   color:#e0162b;filter:none;text-shadow:0 2px 0 #fff8ec,0 4px 18px rgba(224,22,43,.25)}
:where(html[data-theme="light"]) .sub,:where(html[data-theme="light"]) #greet,:where(html[data-theme="light"]) #status{text-shadow:0 1px 10px rgba(255,248,236,.9)}
:where(html[data-theme="light"]) .sub{color:var(--ink);font-weight:400}
:where(html[data-theme="light"]) #greet{color:var(--gold)}
:where(html[data-theme="light"]) #status{color:var(--red);font-weight:600}
:where(html[data-theme="light"]) .stage .halo{background:radial-gradient(circle,rgba(255,170,60,.42),transparent 62%)}
:where(html[data-theme="light"]) .portrait{background-color:var(--cream2);border-color:var(--saff);
  box-shadow:0 0 0 8px rgba(255,255,255,.7),0 0 0 9px var(--line),0 0 50px rgba(245,160,0,.55),inset 0 0 30px rgba(0,0,0,.25)}
:where(html[data-theme="light"]) .portrait::after{box-shadow:inset 0 0 22px rgba(60,10,20,.35)}
:where(html[data-theme="light"]) .unit{background:var(--glass);border-color:var(--line);box-shadow:0 10px 26px rgba(120,50,20,.14),inset 0 1px 0 #fff}
:where(html[data-theme="light"]) .unit::before{background:linear-gradient(115deg,transparent 35%,rgba(255,200,110,.28) 50%,transparent 65%)}
:where(html[data-theme="light"]) .unit b{color:var(--red);text-shadow:none}
:where(html[data-theme="light"]) .unit span{color:var(--ink2);opacity:1}
:where(html[data-theme="light"]) .btn{color:var(--deep);background:var(--fill);box-shadow:0 6px 22px rgba(245,160,0,.38)}
:where(html[data-theme="light"]) .btn:hover{box-shadow:0 12px 30px rgba(245,160,0,.5)}
:where(html[data-theme="light"]) .btn.ghost{background:var(--white);color:var(--ink);border-color:var(--line);box-shadow:0 4px 14px rgba(120,50,20,.1)}
/* keyframes cannot be scoped: the light glow gets its own name and only the light theme points at it */
@keyframes glowLight{50%{box-shadow:0 6px 36px rgba(245,160,0,.6)}}
:where(html[data-theme="light"]) .day.now{animation-name:glowLight}

/* ---------- nav + logo ---------- */
:where(html[data-theme="light"]) .topnav{background:var(--white);border-bottom:3px solid var(--red);box-shadow:0 6px 18px rgba(120,50,20,.12)}
:where(html[data-theme="light"]) .brand{background:var(--cream);box-shadow:0 0 0 1px var(--line);padding:4px 10px;border-radius:12px}
:where(html[data-theme="light"]) .brand img{filter:none}
@media (max-width:640px){:where(html[data-theme="light"]) .brand{padding:3px 8px;border-radius:10px}}
@media (max-width:420px){:where(html[data-theme="light"]) .brand{padding:2px 3px;border-radius:7px}}
:where(html[data-theme="light"]) .navlinks a{color:var(--red);border-color:rgba(179,18,43,.3);background:var(--cream)}
:where(html[data-theme="light"]) .navlinks a:hover{background:#ffeccc}
:where(html[data-theme="light"]) .brand:focus-visible,:where(html[data-theme="light"]) .topnav a:focus-visible{outline-color:var(--red)}
:where(html[data-theme="light"]) .themetog{color:var(--red);border-color:rgba(179,18,43,.3);background:var(--cream)}
:where(html[data-theme="light"]) .themetog:hover{background:#ffeccc}
:where(html[data-theme="light"]) .themetog:focus-visible{outline-color:var(--red)}

/* ---------- section heads, timeline, shared fields ---------- */
:where(html[data-theme="light"]) .eyebrow{color:var(--gold);text-shadow:none}              /* amber ink, AA on cream */
:where(html[data-theme="light"]) h2.title{color:#e0162b;text-shadow:0 2px 0 #fff8ec}         /* sindoor red, as the hero title */
:where(html[data-theme="light"]) .orn{color:var(--saff)}
:where(html[data-theme="light"]) .orn::before,:where(html[data-theme="light"]) .orn::after{background:linear-gradient(90deg,transparent,var(--saff))}
:where(html[data-theme="light"]) .day{background:var(--glass);border-color:var(--line);box-shadow:0 6px 18px rgba(120,50,20,.08)}
:where(html[data-theme="light"]) .day:hover{border-color:var(--saff)}
:where(html[data-theme="light"]) .day .n{color:var(--red);text-shadow:none}
:where(html[data-theme="light"]) .day .mo,:where(html[data-theme="light"]) .day .wk{color:var(--ink2);opacity:1}
:where(html[data-theme="light"]) .day.now{background:var(--fill);color:var(--deep);border-color:#fff;box-shadow:0 0 36px rgba(245,160,0,.55)}
:where(html[data-theme="light"]) .day.now .n{color:var(--maroon)}
:where(html[data-theme="light"]) .panel{background:var(--glass);box-shadow:0 16px 40px rgba(120,50,20,.12)}
:where(html[data-theme="light"]) input,:where(html[data-theme="light"]) select,:where(html[data-theme="light"]) .gmhelp textarea,:where(html[data-theme="light"]) .rvsheet textarea{background:var(--white);color:var(--ink);border-color:var(--line)}
:where(html[data-theme="light"]) input:focus,:where(html[data-theme="light"]) .gmhelp textarea:focus,:where(html[data-theme="light"]) .rvsheet textarea:focus{border-color:var(--saff);box-shadow:0 0 0 3px rgba(245,160,0,.22)}
:where(html[data-theme="light"]) input::placeholder,:where(html[data-theme="light"]) .gmhelp textarea::placeholder,:where(html[data-theme="light"]) .rvsheet textarea::placeholder{color:#8a6a5c}
:where(html[data-theme="light"]) .gmhelp{background:var(--white);border-color:var(--line)}
:where(html[data-theme="light"]) .gmadd{color:var(--red)}
:where(html[data-theme="light"]) .note{color:var(--ink2);opacity:1}
:where(html[data-theme="light"]) footer .wish{color:var(--ink);text-shadow:0 1px 10px rgba(255,248,236,.9)}
:where(html[data-theme="light"]) footer .ftcredit{color:#6b3a2e}
:where(html[data-theme="light"]) #toast{background:var(--maroon);color:#fff4e0}

/* ---------- finder: controls, map, chips, the line deck ---------- */
:where(html[data-theme="light"]) #finder{--fs:#fff;--fs2:#fff1dc;--fr:#ecd3b4;--fm:#6b3a2e;--ground:#f3e9da}
:where(html[data-theme="light"]) .fpill{background:var(--white);color:var(--ink)}
:where(html[data-theme="light"]) .fpill:hover{border-color:var(--saff)}
:where(html[data-theme="light"]) .fpill-on{color:#fff}
:where(html[data-theme="light"]) .fgo{background:var(--red);color:#fff}
:where(html[data-theme="light"]) .fstat{border-left-color:var(--saff)}
:where(html[data-theme="light"]) .fstat.bad{border-left-color:var(--red);color:var(--red)}
:where(html[data-theme="light"]) .fcount b{color:var(--red)}
:where(html[data-theme="light"]) .fstage .leaflet-tile{filter:grayscale(1) sepia(.18) brightness(1.04) contrast(.92)}
:where(html[data-theme="light"]) .fstage .leaflet-control-attribution{background:rgba(255,255,255,.85);color:var(--ink2)}
:where(html[data-theme="light"]) .fstage .leaflet-control-attribution a{color:var(--red)}
:where(html[data-theme="light"]) .fhint{border-color:var(--saff)}
:where(html[data-theme="light"]) .ffail,:where(html[data-theme="light"]) .fbig{color:var(--red)}
:where(html[data-theme="light"]) .fbadge{color:#fff}
:where(html[data-theme="light"]) .fchip{background:var(--white)}
:where(html[data-theme="light"]) .fchip[aria-pressed="true"]{color:#fff}
:where(html[data-theme="light"]) .fchip[aria-pressed="true"] .fbadge{background:#fff;color:var(--lc)}
:where(html[data-theme="light"]) .fchip[aria-pressed="true"] b,:where(html[data-theme="light"]) .fchip[aria-pressed="true"]>.ph{color:#fff}
:where(html[data-theme="light"]) .fln{box-shadow:0 8px 24px rgba(120,50,20,.1);border:1px solid var(--fr)}
:where(html[data-theme="light"]) .fdot{background:#fff}
:where(html[data-theme="light"]) .fst:hover .fsn,:where(html[data-theme="light"]) .fst.active .fsn{color:var(--red)}
:where(html[data-theme="light"]) .pin span{box-shadow:0 0 0 2px #fff,0 1px 4px rgba(60,10,20,.35)}
:where(html[data-theme="light"]) .pin.apwait span{background:var(--cream)}
:where(html[data-theme="light"]) .pin b,:where(html[data-theme="light"]) .pin em{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(60,10,20,.25)}
:where(html[data-theme="light"]) .fcluster span{color:#fff;border-color:#fff;box-shadow:0 1px 5px rgba(60,10,20,.35)}
/* the five line colours, made deep enough for white numbers and for text on white (the JS sets them inline; important wins) */
:where(html[data-theme="light"]) [style*="ffd27a"]{--lc:#9a5b00!important}
:where(html[data-theme="light"]) [style*="ff6a3d"]{--lc:#c2410c!important}
:where(html[data-theme="light"]) [style*="ff8fa3"]{--lc:#b8185a!important}
:where(html[data-theme="light"]) [style*="ffb347"]{--lc:#b3122b!important}
:where(html[data-theme="light"]) [style*="fff4e0"]{--lc:#5e0b1c!important}
:where(html[data-theme="light"]) path.froute[stroke="#ffd27a"]{stroke:#9a5b00}
:where(html[data-theme="light"]) path.froute[stroke="#ff6a3d"]{stroke:#c2410c}
:where(html[data-theme="light"]) path.froute[stroke="#ff8fa3"]{stroke:#b8185a}
:where(html[data-theme="light"]) path.froute[stroke="#ffb347"]{stroke:#b3122b}
:where(html[data-theme="light"]) path.froute[stroke="#fff4e0"]{stroke:#5e0b1c}

/* ---------- reviews ---------- */
:where(html[data-theme="light"]) .rvsum .avg{color:var(--red);text-shadow:none}
:where(html[data-theme="light"]) .rvmeter{color:rgba(224,138,0,.28)}
:where(html[data-theme="light"]) .rvmeter span,:where(html[data-theme="light"]) .rstar{color:#e08a00}
:where(html[data-theme="light"]) .rvn{color:var(--ink2);opacity:1}
:where(html[data-theme="light"]) .rvrank .rvrow{background:var(--white);color:var(--ink);box-shadow:0 2px 8px rgba(120,50,20,.06)}
:where(html[data-theme="light"]) .rvrank .rvrow[aria-pressed="true"]{border-color:var(--saff);background:#fff4e0;box-shadow:0 0 0 1px var(--saff)}
:where(html[data-theme="light"]) .rvrank em{color:var(--ink2);opacity:1}
:where(html[data-theme="light"]) .rvclear{background:var(--white);border-color:var(--saff);color:var(--ink)}
:where(html[data-theme="light"]) .rvcard{background:linear-gradient(180deg,#fff,#fffaf2);border-color:var(--line);box-shadow:0 10px 28px rgba(120,50,20,.1);backdrop-filter:none}
:where(html[data-theme="light"]) .rvcard::before{background:radial-gradient(circle at calc(100% - 25px) 24px,rgba(255,170,60,.2),transparent 55%);box-shadow:0 0 0 1px var(--saff),0 14px 34px rgba(120,50,20,.14)}
:where(html[data-theme="light"]) .rvcard::after{background:repeating-radial-gradient(circle at 34px 30px,rgba(200,16,46,.07) 0 1px,transparent 1px 9px)}
:where(html[data-theme="light"]) .rvq{color:var(--saff)}
:where(html[data-theme="light"]) .rvcard blockquote,:where(html[data-theme="light"]) .rvby b{color:var(--ink)}
:where(html[data-theme="light"]) .rvby{border-top-color:var(--line)}
:where(html[data-theme="light"]) .rvby time{color:var(--ink2)}
:where(html[data-theme="light"]) .rvinit{color:var(--red);background:linear-gradient(#fff8ec,#fcebd0) padding-box,linear-gradient(135deg,#ffc94a,#f5a000 55%,#b5673a) border-box}
:where(html[data-theme="light"]) .rvtag{background:#fff4e0;color:var(--ink)}
:where(html[data-theme="light"]) .rvcard.skeleton i{background:linear-gradient(90deg,rgba(224,138,0,.08),rgba(224,138,0,.2),rgba(224,138,0,.08)) 0 0/200% 100%}
:where(html[data-theme="light"]) .rvmore small{color:var(--ink2);opacity:1}
:where(html[data-theme="light"]) .rvprog{background:rgba(224,138,0,.18)}
:where(html[data-theme="light"]) .rvprog i{background:var(--saff)}
:where(html[data-theme="light"]) .rvnav{background:var(--white);color:var(--red);box-shadow:0 4px 14px rgba(120,50,20,.12)}

/* ---------- the two sheets (review, add-puja) and the map dock ---------- */
:where(html[data-theme="light"]) .rvsheet,:where(html[data-theme="light"]) .apsheet{background:linear-gradient(180deg,#fff,var(--cream) 70%);box-shadow:0 -20px 50px rgba(60,10,20,.22)}
:where(html[data-theme="light"]) .rvsheet::backdrop,:where(html[data-theme="light"]) .apsheet::backdrop{background:rgba(61,7,18,.38)}
:where(html[data-theme="light"]) .rvhandle,:where(html[data-theme="light"]) .aphandle{background:rgba(150,70,30,.35)}
:where(html[data-theme="light"]) .rvx:hover,:where(html[data-theme="light"]) .rvx:focus-visible,:where(html[data-theme="light"]) .apx:hover,:where(html[data-theme="light"]) .apx:focus-visible{background:rgba(61,7,18,.07)}
:where(html[data-theme="light"]) .rvsheet h3,:where(html[data-theme="light"]) .apsheet h3{color:var(--red)}
:where(html[data-theme="light"]) .rvlbl,:where(html[data-theme="light"]) .aplbl,:where(html[data-theme="light"]) .rvdone p,:where(html[data-theme="light"]) .apdone p.serif,:where(html[data-theme="light"]) .apmsg,:where(html[data-theme="light"]) .apopt b,:where(html[data-theme="light"]) .apsum dd{color:var(--ink)}
:where(html[data-theme="light"]) .rvstar{color:rgba(224,138,0,.3)}
:where(html[data-theme="light"]) .rvstar.sel{color:#e08a00;text-shadow:0 0 10px rgba(245,160,0,.4)}
:where(html[data-theme="light"]) .rvprob,:where(html[data-theme="light"]) .rvfail,:where(html[data-theme="light"]) .approb,:where(html[data-theme="light"]) .apfail,:where(html[data-theme="light"]) .apmsg.bad,:where(html[data-theme="light"]) .apdel,:where(html[data-theme="light"]) .apask button,:where(html[data-theme="light"]) .apask .apyes{color:var(--red)}
:where(html[data-theme="light"]) .aprail li{border-top-color:rgba(224,138,0,.22);color:var(--ink2)}
:where(html[data-theme="light"]) .aprail li[aria-current],:where(html[data-theme="light"]) .aprail li.done{color:var(--ink)}
:where(html[data-theme="light"]) .aprail li[aria-current]{border-color:var(--saff)}
:where(html[data-theme="light"]) .aprail li.done{border-color:rgba(224,138,0,.6)}
:where(html[data-theme="light"]) .aprail li[aria-current] b{background:var(--fill);color:var(--deep);box-shadow:0 0 12px rgba(245,160,0,.45)}
:where(html[data-theme="light"]) .apdup,:where(html[data-theme="light"]) .apchosen{background:#fff4e0;color:var(--ink)}
:where(html[data-theme="light"]) .apopt,:where(html[data-theme="light"]) .apsum{background:var(--white);box-shadow:0 2px 8px rgba(120,50,20,.06)}
:where(html[data-theme="light"]) .apopt:hover,:where(html[data-theme="light"]) .apopt[aria-expanded="true"]{border-color:var(--saff);background:#fff4e0}
:where(html[data-theme="light"]) .apask{color:var(--ink)}
:where(html[data-theme="light"]) .apdock{background:linear-gradient(180deg,#fff,var(--cream));border-color:var(--saff);color:var(--ink);box-shadow:0 12px 34px rgba(60,10,20,.2)}

/* ---------- music bar, playlist panel, the floating pin ---------- */
:where(html[data-theme="light"]) #musicbar{background:rgba(255,250,242,.96);border-color:var(--line);box-shadow:0 8px 24px rgba(60,10,20,.16)}
:where(html[data-theme="light"]) #musicbar .ytposter{background:var(--cream2)}
:where(html[data-theme="light"]) #musicbar .mtitle{color:var(--red)}
:where(html[data-theme="light"]) #musicbar .martist,:where(html[data-theme="light"]) #musicbar .voltag{color:var(--ink2);opacity:1}
:where(html[data-theme="light"]) #musicbar .mctrls button,:where(html[data-theme="light"]) #musicbar .snd,:where(html[data-theme="light"]) #musicbar #volClose{background:var(--white);color:var(--ink);border-color:var(--line)}
:where(html[data-theme="light"]) #musicbar .snd{color:var(--red)}
:where(html[data-theme="light"]) #musicbar #mPlay,:where(html[data-theme="light"]) #musicbar .snd.on{background:var(--fill);color:var(--deep);border:0}
:where(html[data-theme="light"]) #musicbar .volpct{color:var(--red)}
:where(html[data-theme="light"]) #musicbar .volpopup input[type=range]{background:linear-gradient(to right,#f5a000 0%,#ffc94a var(--pct,100%),rgba(150,70,30,.18) var(--pct,100%));box-shadow:inset 0 1px 2px rgba(60,10,20,.2)}
:where(html[data-theme="light"]) #mPanel{background:rgba(255,250,242,.98);box-shadow:0 -12px 34px rgba(60,10,20,.18)}
:where(html[data-theme="light"]) #mPanel .mpanelhead h3{color:var(--red)}
:where(html[data-theme="light"]) #mPanel .mtab{background:var(--white)}
:where(html[data-theme="light"]) #mPanel .mtab.on{background:var(--fill);color:var(--deep)}
:where(html[data-theme="light"]) #mPanel .mrow:hover{background:rgba(224,138,0,.08)}
:where(html[data-theme="light"]) #mPanel .mrow.cur{background:rgba(245,160,0,.18)}
:where(html[data-theme="light"]) #mPanel .mrow.cur .mrt b{color:var(--red)}
:where(html[data-theme="light"]) #mPanel .mrow .mn,:where(html[data-theme="light"]) #mPanel .mrow .mrt small,:where(html[data-theme="light"]) #mPanel .mrow .md{color:var(--ink2);opacity:1}
:where(html[data-theme="light"]) .sndmute:not(.onsplash){color:var(--red);border-color:rgba(179,18,43,.3);background:var(--cream)}
:where(html[data-theme="light"]) .sndmute:not(.onsplash):hover{background:#ffeccc}

/* greeting band in the light theme: cream glass, red hairlines */
:where(html[data-theme="light"]) #greet{background:rgba(255,248,236,.72);border-color:rgba(179,18,43,.25)}

/* ===== css/days-timeline.css ===== */
/* ================= day calendar as a countdown timeline (built by js/days-timeline.js) =================
   One thin line under the countdown tiles: a label row above it (one stop's name and weekday at a time),
   the stops on it, their date numerals under it. Gold on the dark page; light.css remaps the tokens for cream. */

/* 8 Oct: the tiles are gone, the wait shows in the stop's tip; the strip gets room above it for the tip and below for the names */
#count .unit{display:none}
.mf-tl{position:relative;width:min(100%,720px);height:150px;margin:53px auto 0}
.mf-in{position:absolute;inset:0 26px}           /* every left:% below is a share of this box, the line's own length */
.mf-track{position:absolute;left:0;right:0;top:58px;height:2px}
.mf-track i{position:absolute;top:0;height:2px;border-radius:2px}
.mf-track .line{right:0;background:linear-gradient(90deg,var(--line),var(--gold))}
.mf-track .lead{left:0;background:repeating-linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 9px);opacity:.7}
.mf-track .done{height:3px;top:-.5px;background:var(--gold);box-shadow:0 0 10px rgba(255,170,60,.7)}

/* the stops: 44 px wide buttons on the line; the dot sits on the line, the numeral under it */
.mf-stop{position:absolute;top:36px;width:48px;height:58px;margin-left:-24px;padding:0;border:0;background:none;color:var(--ink);
  font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mf-stop .dot{position:absolute;left:50%;top:22px;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--deep);border:2px solid var(--gold);transition:transform .2s}
.mf-stop.past .dot{background:var(--gold);opacity:.55}
.mf-stop .num{position:absolute;left:50%;top:32px;translate:-50% 0;white-space:nowrap;font-size:1rem;line-height:1.5;font-weight:600;color:var(--gold);
  font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.mf-stop.next .dot,.mf-stop.now .dot{width:16px;height:16px;margin:-8px 0 0 -8px;background:var(--gold);border-color:#fff4e0;
  box-shadow:0 0 0 4px rgba(255,210,122,.25),0 0 16px rgba(255,170,60,.9)}
.mf-stop.next .num,.mf-stop.now .num{font-size:1.15rem;top:32px}
.mf-stop:hover .dot,.mf-stop.on .dot{transform:scale(1.25)}
.mf-stop:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:10px}

/* the label above the line: one at a time */
.mf-stop .tip{position:absolute;bottom:calc(100% - 2px);left:50%;translate:-50% 0;display:none;white-space:nowrap;text-align:center;
  padding:9px 18px;border-radius:18px;background:rgba(20,2,8,.55);border:1px solid rgba(255,210,122,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:1rem;line-height:1.5;font-weight:600;color:#fff4e0;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.mf-stop .tip b{display:block;margin:0 0 2px;font-size:1.1rem;line-height:1.4;font-weight:800;color:#ff3b4e}
.mf-stop .name{position:absolute;left:50%;top:60px;translate:-50% 0;white-space:nowrap;font-size:.74rem;line-height:1.5;font-weight:600;color:var(--ink);opacity:.9}
.mf-stop.next .name,.mf-stop.now .name{color:var(--gold);opacity:1}
@media (max-width:480px){.mf-stop:nth-child(odd) .name{top:80px}}   /* phones: alternate rows so the names never touch */
@media (min-width:768px){
  .mf-tl{margin-top:60px;height:160px}
  .mf-stop .num{font-size:1.15rem}.mf-stop.next .num,.mf-stop.now .num{font-size:1.3rem}
  .mf-stop .name{font-size:.9rem;top:64px}
  .mf-stop .tip{font-size:1.1rem;padding:10px 20px}.mf-stop .tip b{font-size:1.25rem}
}
.mf-stop.on .tip{display:block}
.mf-stop.el .tip{left:0;translate:0 0}
.mf-stop.er .tip{left:auto;right:0;translate:0 0}

/* today: a small marker on the line with its word under it */
.mf-today{position:absolute;top:44px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:.7rem;font-weight:700;color:var(--gold);pointer-events:none;white-space:nowrap}
.mf-today i{width:2px;height:18px;border-radius:2px;background:#fff4e0;box-shadow:0 0 8px rgba(255,210,122,.9)}

:where(html[data-theme="light"]) .mf-today i{background:var(--red);box-shadow:none}
:where(html[data-theme="light"]) .mf-stop .num{text-shadow:0 1px 8px rgba(255,248,236,.9)}
:where(html[data-theme="light"]) .mf-stop.next .dot,:where(html[data-theme="light"]) .mf-stop.now .dot{background:var(--saff);border-color:#fff}
:where(html[data-theme="light"]) .mf-stop .tip{box-shadow:0 6px 16px rgba(120,50,20,.2)}   /* the tip keeps its dark glass on cream */
:where(html[data-theme="light"]) .mf-stop .tip b{color:#ffc94a}   /* the day in saffron, not red, on the dark glass (Nayan) */
:where(html[data-theme="light"]) .mf-stop .name{text-shadow:0 1px 8px rgba(255,248,236,.9)}

@media (prefers-reduced-motion:reduce){.mf-stop .dot{transition:none}}

/* the timeline replaces the day section; the finder follows the hero and reads as the main event */
#days{display:none}
#finder{padding-top:28px}
#finder .orn{margin-bottom:1.4rem}

/* ===== css/countdown-states.css ===== */
/* ================= hero by festival phase (js/countdown-states.js sets html[data-cs]) =================
   before / during: nothing here applies; the tiles are hidden by css/days-timeline.css and the timeline's tip carries the wait.
   after: one farewell line in the hero's lettering face, no box. Gaps match the rest of the hero:
   band -> line 22px, line -> strip 22px (the strip's usual 53/60px headroom is for the tip, which no stop shows after the puja). */

html:is([data-cs="during"],[data-cs="after"]) #count .unit,
html:is([data-cs="during"],[data-cs="after"]) #status{display:none}

html[data-cs="after"] #count{margin-top:19px}            /* #greet has 3.2px below it already */
html[data-cs="after"] .mf-tl{margin-top:22px}
@media (min-width:768px){html[data-cs="after"] .mf-tl{margin-top:22px}}

.cs-farewell{margin:0;padding:0 .2em;text-align:center;font-family:"Mahin Alapan",serif;font-weight:400;
  font-size:clamp(1.7rem,6.4vw,2.3rem);line-height:1.5;color:var(--gold);text-shadow:0 2px 16px rgba(255,140,40,.55)}
.cs-farewell small{display:block;font-family:"Hind Siliguri",sans-serif;font-size:.95rem;line-height:1.6;color:var(--ink);opacity:.9;text-shadow:0 2px 10px #000}
:where(html[data-theme="light"]) .cs-farewell{color:#e0162b;text-shadow:0 2px 0 #fff8ec}
:where(html[data-theme="light"]) .cs-farewell small{color:#5a1a00;text-shadow:none}

/* timeline: from 16 Oct "today" always sits on a stop (the stop itself is lit as .now), so its word would print over that
   stop's date; keep just the marker line */
html:is([data-cs="during"],[data-cs="after"]) .mf-today{font-size:0;gap:0}

/* ===== ff/footer-family.css ===== */
/* Footer ek-chala: theme tokens, paint classes and the sketch layer used while the lines draw. */
.ff-wrap{max-width:980px;margin:0 auto 1.2rem;aspect-ratio:1100/752;position:relative}
.ff-art{display:block;width:100%;height:100%;overflow:visible}

/* ---------- tokens: dark (default) ---------- */
.ff-wrap{
  --ff-line:#ffd27a;--ff-ink:#2a0410;--ff-sketch:#ffd27a;--ff-goldline:#ffc24d;
  --ff-panel:#3e0614;--ff-band:#6e0c22;--ff-glowc:#ff9a2a;--ff-halo:#ffcf6e;--ff-halodisc:#8e1129;--ff-ray:#d2452f;
  --ff-skinD:#f3b53c;--ff-skin:#fbd8ad;--ff-skinG:#f8cfb6;--ff-skinK:#f0bf73;
  --ff-red:#c8102e;--ff-gold:#e8a21e;--ff-hair:#1b0206;--ff-eye:#fff8ea;--ff-pink:#f39bb3;
  --ff-green:#2f8a4c;--ff-white:#fff3e0;--ff-owl:#fff0d8;--ff-wood:#9b4a1c;--ff-swan:#fffaf2;
  --ff-flame:#ff9a1f;--ff-clay:#b5522a;--ff-lion:#e9a83a;--ff-mane:#c25d18;--ff-mouse:#bfa58c;
  --ff-yellow:#f2b31b;--ff-blue:#1d5cc0;--ff-teal:#1a8f86;
}
/* ---------- tokens: light ---------- */
:where(html[data-theme="light"]) .ff-wrap{
  --ff-line:#5e0b1c;--ff-ink:#2a0410;--ff-sketch:#b3122b;--ff-goldline:#b06d00;
  --ff-panel:#fff4e2;--ff-ray:#e9604f;--ff-band:#fcd98f;--ff-glowc:#ffb84a;--ff-halo:#ffd36b;
  --ff-white:#fffdf8;--ff-owl:#fffaf0;
}

/* ---------- paint ---------- */
.ff-art :is(path,circle,ellipse,rect){stroke:var(--ff-line);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;fill:none}
.ff-art .th{stroke-width:1.2}
.ff-art .lw{stroke-width:3.5}
.ff-art .ns{stroke:none}
.ff-art .k{stroke:var(--ff-ink)}
.ff-art .lid{stroke-width:2.2}
.ff-art .red{stroke:var(--ff-red)}
.ff-art .gl{stroke:var(--ff-goldline);stroke-width:2.4}
.ff-art .bowl{stroke:var(--ff-gold);stroke-width:7}
.ff-art .dash{stroke-dasharray:2 5}
.ff-art .f-band{fill:var(--ff-band)}.ff-art .f-panel{fill:var(--ff-panel)}.ff-art .f-glow{fill:url(#ffGlowGrad)}
.ff-art .f-halo{fill:var(--ff-halo)}.ff-art .f-halodisc{fill:var(--ff-halodisc)}.ff-art .f-ray{fill:var(--ff-ray)}.ff-art .f-skinD{fill:var(--ff-skinD)}.ff-art .f-skin{fill:var(--ff-skin)}
.ff-art .f-skinG{fill:var(--ff-skinG)}.ff-art .f-skinK{fill:var(--ff-skinK)}.ff-art .f-red{fill:var(--ff-red)}
.ff-art .f-gold{fill:var(--ff-gold)}.ff-art .f-hair{fill:var(--ff-hair)}.ff-art .f-eye{fill:var(--ff-eye)}
.ff-art .f-ink{fill:var(--ff-ink)}.ff-art .f-pink{fill:var(--ff-pink)}.ff-art .f-green{fill:var(--ff-green)}
.ff-art .f-white{fill:var(--ff-white)}.ff-art .f-owl{fill:var(--ff-owl)}.ff-art .f-wood{fill:var(--ff-wood)}
.ff-art .f-swan{fill:var(--ff-swan)}.ff-art .f-flame{fill:var(--ff-flame)}.ff-art .f-clay{fill:var(--ff-clay)}
.ff-art .f-lion{fill:var(--ff-lion)}.ff-art .f-mane{fill:var(--ff-mane)}.ff-art .f-mouse{fill:var(--ff-mouse)}
.ff-art .f-yellow{fill:var(--ff-yellow)}.ff-art .f-blue{fill:var(--ff-blue)}.ff-art .f-teal{fill:var(--ff-teal)}
.ff-art .halo,.ff-art .flame{transform-box:fill-box;transform-origin:50% 50%}
.ff-art .flame{transform-origin:50% 100%}

/* ---------- sketch: the patua's gold line, drawn before the colour arrives ---------- */
.ff-art .ff-sketch :is(path,circle,ellipse,rect){fill:none!important;stroke:var(--ff-sketch)!important;stroke-width:1.5!important}
.ff-art .ff-sketch .f-panel,.ff-art .ff-sketch .f-band,.ff-art .ff-sketch .f-glow{display:none}

/* before the script runs and for reduced motion the finished painting shows; the script hides it only to animate */
@media (prefers-reduced-motion:reduce){.ff-art .ff-sketch{display:none}}

/* ===== css/map-ticket.css ===== */
/* The "map ticket": the hero's main action, a gold card that sends visitors to the pandal finder.
   Left a maroon disc with a gold ring and a map pin that sends out a soft ping every few seconds, middle the title and
   what you get (the real pandal count, filled by js/map-ticket.js), right a caret pointing down to the finder.
   The surface is the site's own gold CTA gradient with faint contour and route lines that echo the finder's line map.
   The ticket sits right under the subtitle; the greeting, status, countdown and timeline follow it. */

/* the hero around it: a smaller disc and title on phones and short laptops, so the ticket lands above the music bar */
header .actions{margin-top:1rem;width:100%;justify-content:center}
#greet{margin-top:22px}
@media (max-width:520px){
  :root{--ps:clamp(120px,32vw,150px)}
  .stage{width:calc(var(--ps)*1.36);height:calc(var(--ps)*1.36)}
}
@media (min-width:521px) and (max-height:1000px){
  :root{--ps:clamp(150px,22vh,200px)}
  h1,h1.serif{font-size:clamp(3.2rem,9vh,5rem)}
}

.actions .mticket{margin:0 auto}
.mticket{--mt-ink:#3a0512;--mt-ink2:#5a1424;--mt-ring:#ffd27a;--mt-disc:#3a0512;--mt-pingc:rgba(255,210,122,.9);
  position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;width:min(100%,360px);min-height:64px;
  padding:10px 14px 10px 10px;border-radius:20px;text-decoration:none;text-align:left;color:var(--mt-ink);
  background:linear-gradient(135deg,#ffe9b0,#ffb347);
  box-shadow:0 8px 28px rgba(255,170,60,.5),0 0 0 1px rgba(255,236,190,.55) inset,0 -2px 0 rgba(150,60,0,.18) inset;
  transition:transform .2s,box-shadow .2s;animation:mtGlow 2.6s ease-in-out infinite;overflow:hidden}
/* contour + route texture: thin rings off the right edge and one dotted route line, drawn in the ink colour at low alpha */
.mticket::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background:
    radial-gradient(circle at 108% 120%,transparent 0 22px,var(--mt-ink) 22px 23px,transparent 23px 40px,var(--mt-ink) 40px 41px,
      transparent 41px 58px,var(--mt-ink) 58px 59px,transparent 59px 76px,var(--mt-ink) 76px 77px,transparent 77px 94px,var(--mt-ink) 94px 95px,transparent 95px),
    radial-gradient(circle at 30% -60%,transparent 0 70px,var(--mt-ink) 70px 71px,transparent 71px 88px,var(--mt-ink) 88px 89px,transparent 89px);
}
.mticket::after{content:"";position:absolute;left:62px;right:0;bottom:5px;height:2px;z-index:-1;pointer-events:none;opacity:.22;
  background:repeating-linear-gradient(90deg,var(--mt-ink) 0 6px,transparent 6px 12px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  transform:rotate(-1.5deg)}
.mticket:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,170,60,.65),0 0 0 1px rgba(255,236,190,.55) inset,0 -2px 0 rgba(150,60,0,.18) inset}
.mticket:active{transform:scale(.97)}
.mticket:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@keyframes mtGlow{50%{box-shadow:0 8px 44px rgba(255,190,80,.85),0 0 0 1px rgba(255,236,190,.55) inset,0 -2px 0 rgba(150,60,0,.18) inset}}

/* the pin disc and its ping */
.mt-pin{position:relative;flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#6a1226,var(--mt-disc) 70%);color:var(--mt-ring);
  box-shadow:0 0 0 2px var(--mt-ring),0 0 0 4px rgba(58,5,18,.18),0 3px 10px rgba(58,5,18,.35)}
.mticket .ph{position:relative;inset:auto;display:block;border-radius:0;opacity:1;transition:none;line-height:1}   /* not the hero's photo .ph */
.mt-pin .ph{font-size:24px;z-index:1}
.mt-pin::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--mt-pingc);opacity:0;
  animation:mtPing 3.6s cubic-bezier(.2,.6,.3,1) 1.2s infinite}
@keyframes mtPing{0%{scale:1;opacity:.9}35%{scale:1.75;opacity:0}100%{scale:1.75;opacity:0}}

/* the ticket stub: a dashed seam between the disc and the words */
.mt-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;padding-left:12px;
  border-left:2px dashed rgba(58,5,18,.28)}
.mt-t{font-size:1.08rem;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-s{font-size:.8rem;font-weight:500;line-height:1.3;color:var(--mt-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mt-go{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:rgba(58,5,18,.12);color:var(--mt-ink);font-size:18px;line-height:1}
.mt-go .ph{animation:mtNudge 2.4s ease-in-out infinite}
@keyframes mtNudge{0%,60%,100%{translate:0 0}30%{translate:0 3px}}

/* light theme: the site's light fill and dark maroon ink; the disc stays maroon with its gold ring */
:where(html[data-theme="light"]) .mticket{--mt-ink:#3d0712;--mt-ink2:#5e0b1c;background:linear-gradient(135deg,#ffd36b,#f5a000);
  box-shadow:0 6px 22px rgba(245,160,0,.4),0 0 0 1px rgba(255,240,200,.6) inset,0 -2px 0 rgba(120,50,0,.2) inset;animation-name:mtGlowLight}
@keyframes mtGlowLight{50%{box-shadow:0 8px 32px rgba(245,160,0,.6),0 0 0 1px rgba(255,240,200,.6) inset,0 -2px 0 rgba(120,50,0,.2) inset}}

@media (prefers-reduced-motion:reduce){.mticket,.mt-pin::after,.mt-go .ph{animation:none}.mticket:hover{transform:none}}

/* 8 Oct: the ticket wears the campaign's yellow pill (pujaoffer26 header): red pin, two lines, red "খুলুন" tag that nudges */
.mticket{width:auto;max-width:min(100%,400px);min-height:0;gap:10px;padding:8px 8px 8px 16px;border-radius:999px;
  background:linear-gradient(90deg,#ffe066,#ffb300);color:#5a1a00;box-shadow:0 4px 14px rgba(255,170,0,.45);animation:none}
.mticket::before,.mticket::after{display:none}
.mticket:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,170,0,.55)}
.mt-cpin{flex:0 0 auto;display:block;filter:drop-shadow(0 2px 4px rgba(90,26,0,.3))}
.mt-txt{padding:0;border-left:0;gap:0}
.mt-s{order:-1;font-size:12px;font-weight:700;line-height:1.65;color:#5a1a00;opacity:.85}   /* Bangla needs the headroom: চন্দ্রবিন্দু and the tops of ট were clipped at 1.2 */
.mt-t{font-size:16px;font-weight:800;line-height:1.5;color:#5a1a00}
.mt-tag{flex:0 0 auto;font-style:normal;padding:6px 13px;line-height:1.5;border-radius:999px;background:#c8102e;color:#fff;font-size:13px;font-weight:800;white-space:nowrap;
  animation:mtTag 1.2s ease-in-out infinite}
@keyframes mtTag{0%,100%{translate:0 0}50%{translate:3px 0}}
:where(html[data-theme="light"]) .mticket{background:linear-gradient(90deg,#ffe066,#ffb300);box-shadow:0 4px 14px rgba(255,170,0,.45);animation:none}
@media (max-width:360px){.mt-t{font-size:14px}.mt-s{font-size:11px}.mt-tag{padding:6px 10px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.mt-tag{animation:none}}

/* ===== css/disc-fill.css ===== */
/* The alpana ring that fills the empty band around the portrait disc. js/disc-fill.js builds the ornament SVG inside
   .stage, behind the halo. */

/* the ornament: centred on the disc, 2.7 discs wide, behind every word, never clickable, clipped to the screen width */
header{overflow-x:clip}
.alpana{position:absolute;left:50%;top:50%;width:calc(var(--ps)*2.7);height:calc(var(--ps)*2.7);translate:-50% -50%;
  pointer-events:none;overflow:visible;color:#ffd27a;fill:none;stroke:currentColor}
html[data-theme="light"] .alpana{color:#9c2f0a}

/* gold line art at texture strength, a turn every 120 s */
.alpana{opacity:.6;stroke-width:.75;
  /* gone before the ওঁ line: fades out from just under the disc to the bottom of the stage */
  -webkit-mask-image:linear-gradient(180deg,#000 calc(50% + var(--ps)*.48),transparent calc(50% + var(--ps)*.68));
          mask-image:linear-gradient(180deg,#000 calc(50% + var(--ps)*.48),transparent calc(50% + var(--ps)*.68))}
.alpana .thin{stroke-width:.5}
.alpana .dot{fill:currentColor;stroke:none}
.alpana .spin{animation:alpanaSpin 120s linear infinite}
html[data-theme="light"] .alpana{opacity:.55}
@keyframes alpanaSpin{to{rotate:360deg}}

/* reduced motion: the alpana holds still */
@media (prefers-reduced-motion:reduce){.alpana .spin{animation:none}}

/* ===== css/music-bar.css ===== */
/* Puja 2026 music bar: Phosphor icons in place of emoji, one row at any phone width, a light-theme bar.
   Every control is a 44 px tall hit box; the round face drawn inside it (::before) stays small so the title keeps room.
   Loaded after the page's own <style> and css/light.css, so equal selectors here win. */

#musicbar{flex-wrap:nowrap;gap:4px;padding:6px}
#musicbar .mmeta{flex:1 1 0;min-width:0;padding-left:2px}
#musicbar .mctrls{gap:0}
#musicbar .myt .ytplayovl{font-size:.8rem}

/* the control: a transparent hit box with a drawn face */
#musicbar .mctrls button,#musicbar #volClose{position:relative;width:34px;height:44px;padding:0;border:0;border-radius:12px;background:none;
  color:var(--ink);font-size:1.05rem;display:grid;place-items:center;cursor:pointer;isolation:isolate}
#musicbar .mctrls button::before,#musicbar #volClose::before{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;translate:-50% -50%;
  border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);z-index:-1;transition:background .15s,scale .15s}
/* the hero photos also use .ph: reset it for every icon in the bar and the panel, as the page does for .snd */
#musicbar .ph,#mPanel .ph{position:static;inset:auto;display:inline-block;border-radius:0;opacity:1;transition:none;line-height:1;width:auto;height:auto}
#musicbar .mctrls button:hover::before,#musicbar #volClose:hover::before{background:rgba(255,255,255,.16)}
#musicbar .mctrls button:active::before{scale:.88}
#musicbar .mctrls button:focus-visible,#musicbar #volClose:focus-visible,#musicbar .snd:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
#musicbar #mPlay{width:38px;height:44px;background:none;color:#3a0512;font-size:1.05rem}
#musicbar #mPlay::before{width:36px;height:36px;border:0;background:linear-gradient(135deg,#ffe9b0,#ffb347)}
#musicbar #mVol,#musicbar #mListBtn{width:34px;height:44px;font-size:1.05rem}
#musicbar #mVol:active{transform:none}
#musicbar .snd{flex:0 0 44px}

/* volume row */
#musicbar .volpopup{gap:4px;min-width:0}
#musicbar.vol-open .mctrls{flex:1 1 0;min-width:0}   /* the slider row takes the freed space and keeps চণ্ডীপাঠ on screen */
#musicbar .voltag{display:grid;place-items:center;font-size:1rem;opacity:1;color:var(--ink)}
#musicbar #volClose{flex:0 0 auto;font-size:.95rem}

/* panel head */
#mPanel .mpanelhead h3{display:flex;align-items:center;gap:8px}
#mPanel .mpanelhead button{width:44px;height:44px;display:grid;place-items:center;font-size:1.1rem}

/* ---------- light theme: a cream bar and panel, so the maroon ink reads (the dark bar hid it) ---------- */
:where(html[data-theme="light"]) #musicbar{background:rgba(255,250,242,.96);border-color:var(--line);box-shadow:0 8px 24px rgba(120,50,20,.18)}
:where(html[data-theme="light"]) #musicbar .martist{color:var(--ink2);opacity:1}
:where(html[data-theme="light"]) #musicbar .mctrls button::before,
:where(html[data-theme="light"]) #musicbar #volClose::before{background:rgba(94,11,28,.06)}
:where(html[data-theme="light"]) #musicbar .mctrls button:hover::before,
:where(html[data-theme="light"]) #musicbar #volClose:hover::before{background:rgba(94,11,28,.12)}
:where(html[data-theme="light"]) #musicbar #mPlay::before{background:linear-gradient(135deg,#ffe9b0,#ffb347)}
:where(html[data-theme="light"]) #musicbar .snd{background:rgba(94,11,28,.06)}
:where(html[data-theme="light"]) #musicbar .volpopup input[type=range]{background:linear-gradient(to right,#f5a000 0%,#ffc94a var(--pct,100%),rgba(94,11,28,.14) var(--pct,100%));box-shadow:none}
:where(html[data-theme="light"]) #mPanel{background:rgba(255,250,242,.98);box-shadow:0 -12px 40px rgba(120,50,20,.22)}
:where(html[data-theme="light"]) #mPanel .mtab{background:var(--white,#fff)}
:where(html[data-theme="light"]) #mPanel .mrow:hover{background:rgba(94,11,28,.05)}
:where(html[data-theme="light"]) #mPanel .mrow.cur{background:rgba(245,160,0,.18)}
:where(html[data-theme="light"]) #mPanel .mrow .mn,
:where(html[data-theme="light"]) #mPanel .mrow .mrt small,
:where(html[data-theme="light"]) #mPanel .mrow .md{color:var(--ink2);opacity:1}

/* ---------- the playlist panel (8 Oct, Nayan's P3): two cards a row on phones, a 760 px sheet with four from 700 px ----------
   The panel sits under the music bar and the offer strip (z 119 < 120), so the playing song stays in sight; its own
   bottom padding (--musicbar-h) keeps the last cards above them. Heading in Mahin Alapan, the count under it. */
#mPanel{z-index:119;max-height:min(78vh,640px)}
#mPanel .mpanelhead{position:relative;justify-content:center;padding:16px 56px 2px}
#mPanel .mpanelhead button{position:absolute;right:14px;top:14px;width:40px;height:40px;display:grid;place-items:center}
#mPanel .mpanelhead .ph{position:static;inset:auto;display:inline-block;border-radius:0;opacity:1;transition:none;line-height:1}
#mPanel .mpanelhead h3.plh{display:grid;justify-items:center;margin:0;font-family:'Mahin Alapan',serif;font-weight:400;font-size:1.7rem;line-height:1.4;color:var(--gold)}
#mPanel .mpanelhead h3.plh small{font-size:.95rem;line-height:1.4;color:#fff4e0}
#mPanel .mtabs{justify-content:center;padding:0 16px 12px;font-size:.8rem;opacity:.75;overflow:visible}
#mPanel .mtabs:not(:empty)::before{content:"❁";margin-right:8px;color:var(--gold)}
#mPanel .mrows{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 14px 16px;align-content:start}
#mPanel .mrow{flex-direction:column;align-items:stretch;gap:6px;padding:0;border-radius:12px;background:none}
#mPanel .mrow:hover{background:none}
#mPanel .mrow:hover .mth img{scale:1.05}
#mPanel .mrow.cur{background:none}
#mPanel .mrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#mPanel .mth{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#3a0a16}
#mPanel .mth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale .3s}
#mPanel .mrow.cur .mth{box-shadow:0 0 0 2px #d4142f,0 0 0 4px #ffd27a}
#mPanel .mrow.cur .mth img{filter:brightness(.45)}
#mPanel .mrow .mrt{padding:0 2px}
#mPanel .mrow .mrt b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;line-height:1.35;font-family:'Hind Siliguri',sans-serif;font-size:.95rem}
#mPanel .mrow .mrt small{font-size:.76rem}
/* the equaliser; with Reduce Motion the bars stand still at three heights */
#mPanel .meq{position:relative;display:none;align-items:flex-end;gap:3px;height:22px;color:#ffd27a}
#mPanel .mrow.cur .meq{display:flex}
#mPanel .meq b{width:4px;height:100%;border-radius:2px;background:currentColor;transform-origin:bottom;transform:scaleY(.55);animation:meq 1s ease-in-out infinite}
#mPanel .meq b:nth-child(2){transform:scaleY(1);animation-delay:-.35s}
#mPanel .meq b:nth-child(3){transform:scaleY(.35);animation-delay:-.7s}
@keyframes meq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@media (min-width:700px){   /* tablets and up: a 760 px sheet in the middle, four cards a row */
  #mPanel{left:50%;right:auto;width:min(760px,calc(100% - 32px));translate:-50% 102%;border:1px solid var(--line);border-bottom:0}
  #mPanel.open{translate:-50% 0}
  #mPanel .mrows{grid-template-columns:repeat(4,1fr)}
}
:where(html[data-theme="light"]) #mPanel .mpanelhead h3.plh{color:#c8102e}
:where(html[data-theme="light"]) #mPanel .mpanelhead h3.plh small{color:var(--gold)}

/* ===== css/offer-bar.css ===== */
/* 8 Oct (Nayan's O2 + S2): a strip joined to the top of the floating music bar that opens promotions.lofistack.com.
   Same box as #musicbar (left/right 8 px, max 360 px, centred) and it sits right on it: --mbar-h is the music bar's own height,
   set by syncMusicbarH in js/music-player.js, which also counts this strip into --musicbar-h so the mute button, the toast,
   the add-puja dock and the footer clear both bars. js/offer-bar.js turns the three lines every 4 seconds. */
#ofbar{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom) + var(--mbar-h,0px));z-index:121;max-width:360px;margin:0 auto;
  display:flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;text-decoration:none;
  background:rgba(20,2,8,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-bottom:1px dashed rgba(255,210,122,.35);border-radius:14px 14px 0 0;
  color:#ffe9b0;font-size:.86rem;font-weight:600;box-shadow:0 -6px 18px rgba(0,0,0,.22)}
#ofbar[hidden]{display:none}
#ofbar:not([hidden])+#musicbar{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent}
#ofbar .ph{position:static;inset:auto;display:inline-block;border-radius:0;opacity:1;transition:none;line-height:1;color:var(--gold);font-size:1.1rem;flex:0 0 auto}   /* not the hero's photo .ph */
#ofbar .oftx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s,translate .3s}
#ofbar .oftx.out{opacity:0;translate:0 6px}
#ofbar b{color:var(--gold);font-weight:700}
#ofbar:hover .ph-arrow-up-right{translate:2px -2px}
#ofbar:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
@media(max-width:360px){#ofbar{padding:0 10px;gap:6px;font-size:13px}}   /* every line fits one row at 320 px (measured) */
@media(prefers-reduced-motion:reduce){#ofbar .oftx.out{translate:none}}

html[data-theme="light"] #ofbar{background:rgba(255,250,242,.96);color:#5a1a00;border-color:rgba(150,70,30,.24);border-bottom:1px dashed rgba(179,18,43,.28);
  box-shadow:0 -6px 18px rgba(120,50,20,.1)}
html[data-theme="light"] #ofbar b,html[data-theme="light"] #ofbar .ph{color:#c8102e}
html[data-theme="light"] #ofbar:focus-visible{outline-color:#c8102e}

/* ===== css/sheet-form.css ===== */
/* 8 Oct (Nayan's F3 + Y2): the add-puja and review sheets as an invitation card, and the site's text buttons in sindoor.
   Heading in Mahin Alapan, centred between a small line and the ❁ ornament, inside a thin gold double frame; every other
   word in Hind Siliguri. Each field is one box: an icon, a small label on top, the words below. Loaded last so it wins over
   addpuja.css, reviews.css and light.css. */

/* ---------- text buttons (.btn without .ghost): sindoor red, gold words, a thin gold edge, an icon ---------- */
.btn:not(.ghost){color:#ffe9b0;background:linear-gradient(135deg,#d4142f,#8e0a20);
  box-shadow:0 8px 24px rgba(200,16,46,.38),0 0 0 1px rgba(255,210,122,.6) inset,0 1px 0 rgba(255,233,176,.3) inset}
.btn:not(.ghost):hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(200,16,46,.5),0 0 0 1px rgba(255,210,122,.8) inset}
.btn .ph{position:static;inset:auto;display:inline-block;border-radius:0;opacity:1;transition:none;line-height:1}   /* not the hero's photo .ph */
.btn .bico{display:grid;place-items:center;flex:0 0 auto;font-size:1.15rem;color:#ffd27a}
.btn .btx{min-width:0;font-weight:700}
.apnext,.rvsend{min-height:52px;gap:10px}
html[data-theme="light"] .btn:not(.ghost){color:#fff4e0;background:linear-gradient(135deg,#c8102e,#8e0a20);
  box-shadow:0 8px 22px rgba(200,16,46,.28),0 0 0 1px rgba(255,210,122,.6) inset}

/* ---------- the card: soft glow at the top, a gold double frame inside ---------- */
.apsheet,.rvsheet{background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(255,210,122,.16),transparent 70%),linear-gradient(180deg,#420a1b,#20030b 70%)}
html[data-theme="light"] :is(.apsheet,.rvsheet){background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(255,179,71,.22),transparent 70%),linear-gradient(180deg,#fff,var(--cream) 70%)}
:is(.apform,.rvform){padding-left:24px;padding-right:24px}
:is(.apform,.rvform)::before{content:"";position:absolute;inset:8px 8px calc(8px + env(safe-area-inset-bottom));border:1px solid rgba(255,210,122,.4);border-radius:20px;
  outline:1px solid rgba(255,210,122,.2);outline-offset:-6px;pointer-events:none}
html[data-theme="light"] :is(.apform,.rvform)::before{border-color:rgba(179,18,43,.3);outline-color:rgba(179,18,43,.15)}
:is(.apx,.rvx){top:12px;right:12px}

/* ---------- heading: small line, title, ornament, all centred ---------- */
.shb{margin:14px 0 0;text-align:center;font-family:'Mahin Alapan',serif;font-size:1.05rem;line-height:1.5;color:#fff4e0}
html[data-theme="light"] .shb{color:var(--gold)}
:is(.apsheet,.rvsheet) h3{text-align:center;font-family:'Mahin Alapan',serif;font-weight:400;font-size:clamp(1.3rem,6.4vw,1.85rem);white-space:nowrap;line-height:1.45;padding:.2em 30px 0;margin-top:-8px}   /* one line from 320 px */
.shorn{display:flex;align-items:center;justify-content:center;gap:10px;margin:-10px 0 2px;color:var(--gold);font-size:.95rem}
.shorn::before,.shorn::after{content:"";height:1px;width:min(22vw,90px);background:linear-gradient(90deg,transparent,var(--gold))}
.shorn::after{rotate:180deg}
.apdone p.serif,.rvdone p{font-family:'Mahin Alapan',serif;font-size:1.45rem}

/* ---------- the step rail: number on top, word below ---------- */
.aprail li{flex-direction:column;justify-content:center;text-align:center;border-top:0;padding-top:0;gap:4px}
.aprail b{width:26px;height:26px;padding-top:0;font-family:'Hind Siliguri',sans-serif;font-weight:700;font-size:.9rem}

/* ---------- fields: one box each ---------- */
:is(.apsheet,.rvsheet) :is(input,select,textarea),.aplbl{font-family:'Hind Siliguri',sans-serif}
.fbox{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;padding:8px 14px 4px;border-radius:14px;
  border:1px solid var(--line);background:rgba(0,0,0,.28);transition:border-color .2s,box-shadow .2s}
.fbox:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,210,122,.18)}
.fbox:has([aria-invalid="true"]){border-color:#ff9a86}
.fbox>.ph{position:static;inset:auto;display:inline-block;border-radius:0;opacity:1;transition:none;line-height:1;grid-row:1/3;font-size:1.3rem;color:var(--gold)}
.fbox>label{grid-column:2;font-size:.78rem;font-weight:600;line-height:1.5;color:var(--gold)}
.fbox>label small{font-weight:400;opacity:.75}
.fbox.nic{grid-template-columns:minmax(0,1fr)}
.fbox.nic>*{grid-column:1}
:is(.apsheet,.rvsheet) .fbox :is(input,select,textarea){grid-column:2;width:100%;min-height:34px;margin:0;padding:2px 0 8px;border:0;border-radius:0;
  background:transparent;box-shadow:none;color:inherit;font-weight:500;font-size:1rem}
:is(.apsheet,.rvsheet) .fbox.nic textarea{grid-column:1;min-height:76px;resize:none}
.fbox select{cursor:pointer}
.fbox select option{color:#2a0410}
html[data-theme="light"] .fbox{background:#fff;border-color:rgba(179,18,43,.18)}
html[data-theme="light"] .fbox:focus-within{border-color:#c8102e;box-shadow:0 0 0 3px rgba(200,16,46,.12)}
html[data-theme="light"] .fbox>.ph{color:#c8102e}
html[data-theme="light"] .fbox>label{color:#b3122b}

/* ---------- review: stars and words centred under the heading ---------- */
.rvstars{justify-content:center}
#rvstarlbl,#rvbestl{text-align:center}
.rvchips{justify-content:center}

/* ===== css/nav.css ===== */
/* 8 Oct nav (Nayan's N2 + PM1): the map link is the only pill; the rest are words with a small icon, so the bar breathes.
   Phones keep one row: the map pill, then music, reviews and share as bare icons (the countdown link stays desktop only).
   Light theme: the logo sits on the bar itself, no box. Loaded after light.css. */
html .navlinks{gap:2px}
html .navlinks a:not(.nv-pri){border:0;background:none;color:#fff4e0;font-size:.84rem;padding:0 10px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
html .navlinks a:not(.nv-pri) .ph{color:var(--gold)}
html .navlinks a:not(.nv-pri):hover{background:none;transform:none;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px}
html .navlinks a.nv-pri{margin-left:8px;margin-right:8px}
html[data-theme="light"] .navlinks a:not(.nv-pri){color:#5a1424;background:none;text-shadow:none}
html[data-theme="light"] .navlinks a:not(.nv-pri) .ph{color:#c8102e}
html[data-theme="light"] .brand{background:none;box-shadow:none;padding:0;border-radius:0}

@media (max-width:640px){
  html .navlinks{gap:4px}
  html .navlinks a.nv-wait{display:none}
  html .navlinks a.nv-pri{margin:0 0 0 auto}
  html .navlinks a:not(.nv-pri){width:36px;height:36px;padding:0;justify-content:center;font-size:0}   /* the word stays as the link's name */
  html .navlinks a:not(.nv-pri) .ph{margin:0;font-size:1.25rem}
  html .navlinks a:last-child{margin-right:auto}
  html .brand img{width:70px}
}
@media (max-width:360px){   /* 320 px: measured to fit with even gaps */
  html .topnav{gap:6px;padding-left:10px;padding-right:10px}
  html .themetog{flex:0 0 36px;width:36px;height:36px;font-size:1.1rem}
  html .brand img{width:60px}
  html .navlinks{gap:2px}
  html .navlinks a.nv-pri{padding:0 9px;font-size:.72rem}
  html .navlinks a:not(.nv-pri){width:30px}
}

/* footer: the 18 thana pages (tools/make_thana_pages.py writes the links), so people and search engines can reach them */
footer .ftthana{max-width:820px;margin:0 auto 1.6rem}
footer .ftthana h2{font-family:'Mahin Alapan',serif;font-weight:400;font-size:1.35rem;line-height:1.5;color:var(--gold);margin-bottom:8px}
footer .ftthana div{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px}
footer .ftthana a{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(26,3,10,.45);color:#ffe9b0;font-size:.82rem;font-weight:600;text-decoration:none}
footer .ftthana a:hover{border-color:var(--gold)}
html[data-theme="light"] footer .ftthana a{background:#fff;color:#5a1424}