/* THE WALL OF FLAMES: rows of votives on gold racks, like walking into a church. Used by candle.html + the homepage band. */
.vwall{position:relative;border:3px solid var(--gold,#c9962e);border-radius:14px;overflow:hidden;
 background:radial-gradient(ellipse at 50% 0%,rgba(255,170,60,.18),transparent 60%),linear-gradient(#1a0805,#0a0302 60%,#140604);
 box-shadow:0 0 0 2px #3a1d02,0 24px 60px rgba(0,0,0,.6),inset 0 0 80px rgba(0,0,0,.8)}
.vw-in{position:relative}
.vrow{position:absolute;left:0;right:0;height:118px;display:flex;justify-content:center;align-items:flex-end;padding:0 10px}
.vrow::before{content:"";position:absolute;left:0;right:0;bottom:22px;height:70px;background:radial-gradient(ellipse at 50% 100%,rgba(255,150,50,.16),transparent 70%);pointer-events:none}
.vrow::after{content:"";position:absolute;left:6px;right:6px;bottom:16px;height:12px;border-radius:3px;
 background:linear-gradient(#fff2b0,#e3b44a 30%,#9a6a12 60%,#5a3a06),repeating-linear-gradient(90deg,transparent 0 22px,rgba(60,30,0,.5) 22px 24px);
 background-blend-mode:multiply;box-shadow:0 4px 8px rgba(0,0,0,.7),0 -1px 0 #fff6d0 inset}
.vrow .leg{position:absolute;bottom:0;width:8px;height:16px;background:linear-gradient(90deg,#5a3a06,#e3b44a,#5a3a06)}
.vt{position:relative;flex:0 0 64px;height:118px;background:none;border:0;padding:0;cursor:pointer;z-index:1;color:inherit}
.vt .cup{position:absolute;left:50%;bottom:28px;width:34px;height:38px;margin-left:-17px;border-radius:5px 5px 9px 9px;
 background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.14) 40%,rgba(255,255,255,.04));border:1px solid rgba(240,200,120,.25);
 box-shadow:inset 0 -6px 10px rgba(0,0,0,.5)}
.vt .cup::before{content:"";position:absolute;left:-2px;right:-2px;top:-3px;height:5px;border-radius:3px;background:linear-gradient(#fff2b0,#c9962e,#6a4508)}
.vt .fl{position:absolute;left:50%;bottom:58px;width:12px;height:22px;margin-left:-6px;border-radius:50% 50% 45% 45%/65% 65% 35% 35%;display:none;
 background:radial-gradient(ellipse at 50% 78%,#fff 0%,#fff0a8 28%,#ffa424 58%,rgba(255,80,0,0) 74%);transform-origin:50% 100%;
 filter:drop-shadow(0 0 6px #ff9a1f);animation:vflick 1.5s ease-in-out infinite;animation-delay:var(--d,0s)}
.vt .nm{position:absolute;left:0;right:0;bottom:1px;font:600 10px/1.2 var(--sans,Arial,sans-serif);color:#f3d6a4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px;text-align:center}
@keyframes vflick{0%,100%{transform:scale(1,1) rotate(-2deg)}25%{transform:scale(.9,1.1) rotate(2deg)}50%{transform:scale(1.06,.94) rotate(-1deg)}75%{transform:scale(.95,1.06) rotate(3deg)}}
/* free candle (48 hours): red wax in clear glass */
.vt.t .cup{border-color:rgba(255,140,100,.5);box-shadow:inset 0 -8px 12px rgba(60,0,0,.4),0 0 14px rgba(255,90,30,.35)}
.vt.t .fl,.vt.p .fl{display:block}
/* free candles burn down over 48 hours: the wax level (--f, 1 = new) drops and the flame drops with it */
.vt .wax{position:absolute;left:3px;right:3px;bottom:3px;height:calc((100% - 8px)*var(--f,1));border-radius:2px 2px 6px 6px;display:none}
.vt.t .wax{display:block;background:linear-gradient(90deg,#8c1b12,#e0482e 45%,#7a160e);box-shadow:inset 0 3px 0 rgba(255,190,150,.5)}
.vt.t .cup{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,120,90,.18) 40%,rgba(255,255,255,.04))}
.vt.t .fl{bottom:calc(34px + 30px*var(--f,1))}
/* FOREVER ($3.99): solid gold cup, halo, never burns down */
.vt.p .cup{background:linear-gradient(90deg,#7a4c08,#ffe08a 45%,#8a5c0e);border-color:#fff2b0;box-shadow:inset 0 -6px 10px rgba(80,40,0,.5),0 0 22px rgba(255,200,80,.75)}
.vt.p .nm{color:#ffe600}
/* open spot: empty clear glass, waiting for you */
.vt.o:hover .cup,.vt.o:focus .cup{border-color:#ffe08a;box-shadow:0 0 14px rgba(255,220,140,.5)}
.vt.o:hover::after{content:"+";position:absolute;left:50%;bottom:40px;transform:translateX(-50%);font:700 18px var(--sans,Arial);color:#ffe08a}
.vt.l .cup{opacity:.35;animation:vload 1s infinite alternate}
@keyframes vload{to{opacity:.12}}
.vt.mine .cup{outline:2px solid #ffe600;outline-offset:3px}
.vt:hover .cup{transform:translateY(-2px)}
.vt:focus-visible{outline:2px solid #ffe600;outline-offset:-2px}
.vw-load{position:absolute;left:0;right:0;text-align:center;font:400 18px var(--vcr,monospace);color:#ffe08a;pointer-events:none}
.vw-end{position:absolute;left:0;right:0;text-align:center;padding:20px;color:#f3d6a4}
.pr{font-family:var(--sans,Arial,sans-serif);font-weight:800;font-variant-numeric:tabular-nums lining-nums;letter-spacing:0}
/* hover card over a candle */
.vtip{position:fixed;z-index:980;max-width:260px;padding:10px 12px;border-radius:10px;border:2px solid #c9962e;background:linear-gradient(#2a0a06,#120402);
 box-shadow:0 10px 30px rgba(0,0,0,.7),0 0 18px rgba(255,170,60,.35);color:#f3d6a4;font:13px/1.35 var(--sans,Arial,sans-serif);pointer-events:none;opacity:0;transition:opacity .12s}
.vtip.on{opacity:1}
.vtip b{display:block;color:#ffe08a;font-size:15px}
.vtip q{display:block;font:italic 15px/1.3 Georgia,serif;color:#fff1cf;margin:3px 0}
.vtip small,.vtip em{display:block;font-size:12px;color:#d9b98a;font-style:normal}
.vtip em{color:#ffe08a;font-weight:700;margin-top:2px}
.cmodal .row{display:flex;flex-wrap:wrap;gap:10px}
/* the pop-up box is cream: dark ink on it (the old cream-on-cream text was invisible) */
.cmodal .when{font:600 14px var(--sans,Arial);color:#6b4a1e;margin-top:6px}
.cmodal .q{font:italic 24px/1.35 Georgia,serif;color:#3b0008;margin:10px 0}
.cmodal .st{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:20px;border:1px solid #c9962e;background:#3b0008;font:700 12px var(--sans,Arial);letter-spacing:.1em;text-transform:uppercase;color:#ffe08a}
/* the floating button on every page */
#brcandle{position:fixed;right:16px;bottom:16px;z-index:970;display:flex;align-items:center;gap:8px;padding:12px 18px 12px 14px;border-radius:40px;
 background:linear-gradient(#fff2b0,#e3b44a 35%,#9a6a12);border:2px solid #3a1d02;color:#3b0008;text-decoration:none;
 font:400 19px/1 var(--display,Impact,sans-serif);text-transform:uppercase;letter-spacing:.03em;box-shadow:0 0 0 2px #ffe08a,0 10px 30px rgba(0,0,0,.6),0 0 30px rgba(255,170,60,.5);
 animation:brcglow 2.4s ease-in-out infinite}
#brcandle .f{width:12px;height:20px;border-radius:50% 50% 45% 45%/65% 65% 35% 35%;background:radial-gradient(ellipse at 50% 78%,#fff 0%,#fff0a8 28%,#ff8a14 60%,#c22 76%);animation:vflick 1.3s infinite;transform-origin:50% 100%}
#brcandle:hover{transform:translateY(-2px)}
@keyframes brcglow{50%{box-shadow:0 0 0 2px #ffe08a,0 10px 30px rgba(0,0,0,.6),0 0 46px rgba(255,190,80,.85)}}
@media(max-width:620px){#brcandle{right:10px;bottom:10px;font-size:16px;padding:10px 14px 10px 12px}.vt{flex-basis:54px}}
@media print{#brcandle{display:none}}