/* Tonight's vigil: candle + flower offerings */
.vigil{background:linear-gradient(180deg,#1d2942 0%,#18223a 100%);color:#e6eaf2;padding:64px 0 70px;border-top:1px solid rgba(255,255,255,.08)}
.vigil h2{font-size:clamp(32px,4vw,44px);color:#fff}
.vigil .vg-sub{margin-top:8px;max-width:52ch;color:#cdd5e3}
.vg-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:28px;margin-top:34px;align-items:stretch}
.vg-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:28px 26px;display:flex;flex-direction:column}
.vg-card h3{font-size:25px;color:#fff}
.vg-card .vg-note{font-size:15px;color:#aab4c8;margin-top:6px}
.vg-count{font-size:16px;color:#cdd5e3;margin-top:14px}
.vg-count b{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--lamp-soft);margin-right:4px;font-variant-numeric:tabular-nums}

/* big candle */
.vg-stage{position:relative;height:250px;display:flex;align-items:flex-end;justify-content:center;margin:12px 0 6px}
.vg-candle{position:relative;width:74px;height:210px}
.vg-halo{position:absolute;left:50%;top:-40px;width:260px;height:260px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(245,189,87,.42) 0%,rgba(245,189,87,.12) 38%,rgba(245,189,87,0) 70%);opacity:0;transition:opacity 1.2s ease-out;pointer-events:none}
.vg-wax{position:absolute;left:0;right:0;bottom:12px;height:150px;border-radius:9px 9px 4px 4px;background:linear-gradient(90deg,#d9cfbd 0%,#f6efe1 34%,#fffaf0 50%,#efe5d2 72%,#cfc3ad 100%);box-shadow:inset 0 10px 14px -10px rgba(120,90,50,.35)}
.vg-wax::before{content:"";position:absolute;left:8px;right:8px;top:0;height:12px;border-radius:50%;background:radial-gradient(ellipse at center,#fff6e3 0%,#e9dcc3 80%)}
.vg-wax::after{content:"";position:absolute;left:14px;top:6px;width:9px;height:34px;border-radius:0 0 6px 6px;background:#f7efe0;box-shadow:1px 2px 3px rgba(120,90,50,.18)}
.vg-plate{position:absolute;left:-26px;right:-26px;bottom:0;height:16px;border-radius:50%;background:linear-gradient(180deg,#b99a64,#7d6440);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.vg-wick{position:absolute;left:50%;bottom:158px;width:3px;height:14px;margin-left:-1.5px;border-radius:2px;background:#2b2118}
.vg-flame{position:absolute;left:50%;bottom:166px;width:26px;height:52px;margin-left:-13px;transform-origin:50% 92%;transform:scale(0);opacity:0;transition:transform .7s cubic-bezier(.2,1.5,.4,1),opacity .3s}
.vg-flame i{position:absolute;inset:0;border-radius:50% 50% 45% 45%/62% 62% 38% 38%;background:radial-gradient(ellipse at 50% 78%,#fff 0%,#fff6c8 18%,#ffd36b 42%,#f59a2e 70%,rgba(230,110,30,0) 100%);filter:blur(.4px);box-shadow:0 0 22px 6px rgba(255,190,90,.45)}
.vg-flame i::after{content:"";position:absolute;left:50%;bottom:6px;width:8px;height:14px;margin-left:-4px;border-radius:50%;background:rgba(70,110,200,.55);filter:blur(2px)}
.vg-candle.lit .vg-flame{transform:scale(1);opacity:1}
.vg-candle.lit .vg-flame i{animation:vgFlick 2.6s ease-in-out infinite}
.vg-candle.lit .vg-halo{opacity:1;animation:vgGlow 3.4s ease-in-out infinite alternate}
@keyframes vgFlick{0%,100%{transform:rotate(-1.5deg) scaleY(1)}22%{transform:rotate(2deg) scaleY(1.06)}48%{transform:rotate(-2.5deg) scaleY(.95)}71%{transform:rotate(1deg) scaleY(1.04)}}
@keyframes vgGlow{from{opacity:.75}to{opacity:1}}
.vg-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffd98a;box-shadow:0 0 6px 2px rgba(255,200,110,.8);pointer-events:none}

/* row of small candles */
.vg-row{display:flex;flex-wrap:wrap;gap:9px 11px;justify-content:center;margin-top:18px;min-height:40px}
.vg-mini{position:relative;width:9px;height:34px}
.vg-mini::before{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;border-radius:2px 2px 1px 1px;background:linear-gradient(90deg,#cfc3ad,#fbf4e6 50%,#d9cfbd)}
.vg-mini span{position:absolute;left:50%;bottom:21px;width:7px;height:12px;margin-left:-3.5px;border-radius:50% 50% 45% 45%/62% 62% 38% 38%;background:radial-gradient(ellipse at 50% 75%,#fff7d0 0%,#ffcf63 45%,rgba(245,150,50,0) 100%);box-shadow:0 0 8px 2px rgba(255,190,90,.38);transform-origin:50% 90%;animation:vgFlick 2.2s ease-in-out infinite}
.vg-mini.mine::before{background:linear-gradient(90deg,#e6c27a,#fff1c9 50%,#e6c27a)}
.vg-mini.mine span{box-shadow:0 0 12px 4px rgba(255,200,100,.6)}
.vg-acts{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:auto;padding-top:16px;text-align:center}
.vg-acts .btn{min-width:210px}
.vg-acts .btn[aria-disabled=true]{cursor:default;background:transparent;border-color:var(--lamp);color:var(--lamp-soft)}

/* flower offering */
.vg-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px;margin-top:16px}
.vg-form label.vg-f{display:grid;gap:4px;font-size:15px;color:#cdd5e3}
.vg-form input,.vg-form select{height:46px;border:1.5px solid #55637f;border-radius:6px;padding:0 12px;background:#24314d;color:#fff;width:100%}
.vg-form input::placeholder{color:#8f9ab0}
.vg-pick{grid-column:1/-1;border:0;margin:0;padding:0;min-width:0}
.vg-pick legend{font-size:15px;color:#cdd5e3;padding:0;margin-bottom:6px}
.vg-chips{display:flex;flex-wrap:wrap;gap:8px}
.vg-chip{position:relative;cursor:pointer}
.vg-chip input{position:absolute;opacity:0;width:1px;height:1px}
.vg-chip span{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:5px 14px 5px 8px;border:1.5px solid #55637f;border-radius:999px;font-size:16px;transition:border-color .2s,background .2s}
.vg-chip svg{width:28px;height:28px;flex:none}
.vg-chip:hover span{border-color:#8f9ab0}
.vg-chip input:checked+span{border-color:var(--lamp);background:rgba(245,189,87,.12);color:#fff}
.vg-chip input:focus-visible+span{outline:3px solid var(--lamp);outline-offset:2px}
.vg-form .btn{grid-column:1/-1;justify-self:start}

.vg-bed{position:relative;list-style:none;margin:26px 0 0;padding:0;height:130px;border-radius:10px;background:radial-gradient(ellipse 60% 70% at 50% 100%,rgba(245,189,87,.16) 0%,rgba(245,189,87,0) 70%)}
.vg-bed::after{content:"";position:absolute;left:6%;right:6%;bottom:-2px;height:2px;background:linear-gradient(90deg,transparent,rgba(240,208,131,.45),transparent)}
.vg-bed.wait .vg-fw{opacity:0}
.vg-bed.still .vg-fw{transition:none}
.vg-fw{position:absolute;cursor:pointer;transition:left .9s cubic-bezier(.4,0,.2,1),bottom .9s cubic-bezier(.4,0,.2,1),width .9s,height .9s}
.vg-in{width:100%;height:100%;transform-origin:50% 55%}
.vg-in svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 4px rgba(6,10,22,.55))}
.vg-fw:hover .vg-in svg,.vg-fw.open .vg-in svg{filter:drop-shadow(0 0 10px rgba(255,214,140,.7)) drop-shadow(0 3px 4px rgba(6,10,22,.55))}
.vg-fw.glow .vg-in svg{animation:vgBloomGlow 1.4s ease-out}
@keyframes vgBloomGlow{0%{filter:drop-shadow(0 0 18px rgba(255,214,140,.9))}100%{filter:drop-shadow(0 3px 4px rgba(6,10,22,.55))}}
.vg-ini{position:absolute;right:4%;bottom:6%;width:20px;height:20px;border-radius:50%;background:#1b2540;border:1.5px solid var(--lamp);color:var(--lamp-soft);font-family:var(--serif);font-size:12px;line-height:17px;text-align:center}
.vg-fw:hover,.vg-fw.open{z-index:120!important}
.vg-tip{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;background:#0f1628;color:#fff;font-size:14px;padding:4px 9px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .15s}
.vg-fw:hover .vg-tip,.vg-fw.open .vg-tip{opacity:1}
.vg-who{align-self:flex-start;margin-top:8px;padding:6px 0;min-height:40px;border:0;background:none;color:var(--lamp-soft);text-decoration:underline;text-underline-offset:4px;cursor:pointer;font-size:16px}
.vg-names{margin:6px 0 0;padding-left:20px;color:#dbe1ec;font-size:16px;line-height:1.7}
.vg-petal{position:absolute;width:11px;height:15px;border-radius:50% 50% 50% 50%/65% 65% 35% 35%;pointer-events:none;z-index:210;box-shadow:inset -2px -2px 3px rgba(0,0,0,.18)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:820px){
 .vg-grid{grid-template-columns:minmax(0,1fr)}
 .vg-form{grid-template-columns:minmax(0,1fr)}
 .vg-tip{white-space:normal;width:max-content;max-width:200px;text-align:center}
}
@media (prefers-reduced-motion:reduce){
 .vg-flame,.vg-halo{transition:none}
 .vg-candle.lit .vg-flame i,.vg-candle.lit .vg-halo,.vg-mini span,.vg-fw.glow .vg-in svg{animation:none}
 .vg-fw{transition:none}
}
