/* =========================================================
   AfterLife Ink — booking ritual (book.html)
   ========================================================= */

.ritual { position: relative; padding: 46px 0 70px; overflow: hidden; isolation: isolate; scroll-margin-top: 70px; }
.ritual-bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    url("assets/bg/candles.webp") left -110px bottom -60px / 260px auto no-repeat,
    url("assets/bg/candles.webp") right -110px bottom -60px / 260px auto no-repeat,
    radial-gradient(ellipse at 50% 100%, rgba(255,43,214,.16), transparent 60%),
    radial-gradient(ellipse at 50% 0%, rgba(57,255,136,.06), transparent 55%),
    #070608;
  opacity: .95;
}
.ritual-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--bg), transparent 15%, transparent 85%, var(--bg)); }

/* ---- step indicator ---- */
.r-steps {
  position: relative; display: flex; justify-content: space-between;
  max-width: 720px; margin: 0 auto 34px; padding: 0; list-style: none;
}
.r-steps::before, .r-steps::after {
  content: ""; position: absolute; top: 19px; left: 20px; height: 2px;
}
.r-steps::before { right: 20px; background: #2c2832; }
.r-steps::after {
  width: calc((100% - 40px) * var(--progress, 0)); background: var(--mag); box-shadow: 0 0 10px var(--mag);
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.r-steps[hidden] { display: none; }
.r-steps li { position: relative; z-index: 1; }
.r-steps button {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; color: var(--muted); cursor: default;
  font: 700 10px/1 var(--f-head); letter-spacing: .16em; text-transform: uppercase;
}
.r-steps button span {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50% 50% 6px 6px / 45% 45% 6px 6px;
  background: linear-gradient(#2a2730, #141217); border: 1.5px solid #3d3844;
  font: 700 13px/1 var(--f-head); color: #8d8696;
  transition: all .4s;
}
.r-steps .is-done button { cursor: pointer; color: #d6cfdc; }
.r-steps .is-done button span { border-color: var(--grn); color: var(--grn); box-shadow: 0 0 10px rgba(57,255,136,.35); }
.r-steps .is-active button { color: var(--text); }
.r-steps .is-active button span { border-color: var(--mag); color: #fff; background: linear-gradient(#4a1240, #1d0619); box-shadow: 0 0 16px rgba(255,43,214,.6); transform: translateY(-3px); }

/* ---- panels ---- */
.r-form { max-width: 1100px; margin: 0 auto; }
.r-panel { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.r-panel.is-active { display: block; animation: panelIn .6s cubic-bezier(.2,.7,.2,1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }
.r-title {
  display: block; width: 100%; padding: 0; text-align: center;
  font: 400 clamp(36px, 8vw, 64px)/1 var(--f-brush); text-shadow: 0 4px 24px #000;
}
.r-sub { margin: 10px auto 26px; max-width: 560px; text-align: center; color: #d6cfdc; }

/* ---- step 1: artists ---- */
.r-artists { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.r-artist { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; transition: opacity .35s, transform .35s; }
.r-artist input { position: absolute; opacity: 0; pointer-events: none; }
.r-artist .artist { display: block; width: 100%; transition: filter .35s; }
.r-artist b { font: 400 30px/1 var(--f-brush); text-transform: uppercase; margin-top: 4px; }
.r-artist small { font: 600 10.5px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.r-artists:has(input:checked) .r-artist:not(:has(input:checked)) { opacity: .4; }
.r-artist:has(input:checked) .artist, .r-artist:has(input:checked) .fate-stone { filter: drop-shadow(0 0 16px rgba(255,43,214,.75)); }
.r-artist:has(input:checked) b { text-shadow: 0 0 16px currentColor; }
.r-artist:has(input:focus-visible) .artist, .r-artist:has(input:focus-visible) .fate-stone { outline: 2px solid var(--grn); outline-offset: 4px; }
.r-fate { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 16px; }
.r-fate b, .r-fate small { margin: 0; }
.fate-stone {
  position: relative; display: grid; place-items: center; width: 92px; aspect-ratio: 2 / 2.6;
  border-radius: 50% 50% 6px 6px / 38% 38% 6px 6px;
  background: linear-gradient(#34303a, #15131a), var(--noise); background-blend-mode: overlay;
  border: 2px solid #4a4552; box-shadow: inset 0 0 0 4px #0c0b0e, 0 10px 24px rgba(0,0,0,.6);
  transition: filter .35s;
}
.fate-stone svg { position: absolute; top: 16%; width: 26px; height: 26px; color: #a59fae; }
.fate-stone em { margin-top: 20%; font: 400 44px/1 var(--f-brush); font-style: normal; color: var(--grn); text-shadow: 0 0 14px var(--grn); animation: flicker 5s infinite; }

/* ---- step 2: tombstone calendar ---- */
.r-cal {
  max-width: 640px; margin: 0 auto; padding: 18px 14px 16px;
  border: 1px solid #2c2832; border-radius: 6px;
  background: linear-gradient(#121015, #09080b), var(--noise); background-blend-mode: overlay;
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
}
.r-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.r-month { font: 600 20px/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase; }
.r-month-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid #3d3844; background: #0d0c10;
  font-size: 24px; line-height: 1; cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.r-month-btn:not(:disabled):hover { border-color: var(--mag); box-shadow: 0 0 12px rgba(255,43,214,.5); }
.r-month-btn:disabled { opacity: .25; cursor: default; }
.r-dow, .r-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.r-dow { margin-bottom: 8px; text-align: center; font: 700 9.5px/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.r-grid { align-items: end; }
.stone {
  position: relative; aspect-ratio: 4 / 5; padding: 0; cursor: pointer;
  border-radius: 50% 50% 3px 3px / 34% 34% 3px 3px;
  border: 1px solid #5a5462;
  background: linear-gradient(170deg, #4a4552, #26232b 60%, #1b191f), var(--noise); background-blend-mode: overlay;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -6px 10px rgba(0,0,0,.5), 0 6px 0 -2px #0f0e11;
  font: 700 clamp(13px, 3.4vw, 17px)/1 var(--f-head); color: #e9e3ee;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  animation: stoneRise .5s calc(var(--i) * 14ms) cubic-bezier(.2,.8,.3,1.2) both;
}
.stone span { position: relative; top: 8%; text-shadow: 0 1px 0 #000, 0 0 8px rgba(57,255,136,.45); }
.stone:not(.taken) { border-color: rgba(57,255,136,.45); box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -6px 10px rgba(0,0,0,.5), 0 6px 0 -2px #0f0e11, 0 0 10px rgba(57,255,136,.18); }
.stone:not(.taken):hover { transform: translateY(-5px); border-color: var(--grn); box-shadow: 0 0 16px rgba(57,255,136,.45), 0 10px 0 -4px #0f0e11; }
.stone.taken {
  cursor: not-allowed; border-color: #2a272e;
  background: linear-gradient(170deg, #1d1b21, #121115), var(--noise); background-blend-mode: overlay;
  color: #4d4855;
}
.stone.taken span { text-shadow: none; }
.stone.past { opacity: .4; animation-name: stoneSink; }
.stone.past::after { display: none; }
@keyframes stoneSink { from { transform: translateY(40%); opacity: 0; } to { opacity: .4; } }
.stone.taken::after {
  content: ""; position: absolute; inset: 18% 22% 25% 30%;
  background: linear-gradient(115deg, transparent 46%, #050506 47%, #050506 52%, transparent 53%),
              linear-gradient(60deg, transparent 47%, #050506 48%, #050506 51%, transparent 52%) 40% 60% / 60% 60% no-repeat;
  opacity: .9;
}
.stone.picked, .stone.picked:hover {
  border-color: var(--mag); color: #fff;
  background: linear-gradient(170deg, #6a1c5e, #2a0a26 65%), var(--noise); background-blend-mode: overlay;
  box-shadow: 0 0 22px rgba(255,43,214,.7), inset 0 0 12px rgba(255,43,214,.5);
  transform: translateY(-4px);
}
.stone.picked span { text-shadow: 0 0 10px #fff; }
.stone.picked::before { content: "R.I.P."; position: absolute; left: 0; right: 0; top: 18%; font: 700 7px/1 var(--f-head); letter-spacing: .1em; color: #ffd0f6; }
.stone:focus-visible { outline: 2px solid var(--grn); outline-offset: 2px; }
@keyframes stoneRise { from { transform: translateY(40%); opacity: 0; } }
.r-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.r-legend i { display: inline-block; width: 12px; height: 15px; margin-right: -8px; border-radius: 50% 50% 2px 2px / 40% 40% 2px 2px; vertical-align: middle; }
.lg-open { background: #3e3a45; box-shadow: 0 0 8px rgba(57,255,136,.6); }
.lg-taken { background: #1a181d; border: 1px solid #2a272e; }
.lg-pick { background: var(--mag); box-shadow: 0 0 8px var(--mag); }
.lg-lit { background: linear-gradient(#ffcf6b, #ff7a1a) !important; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% !important; box-shadow: 0 0 8px #ffab40; }

/* ---- step 3: candles ---- */
.r-candles { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 18px 14px; max-width: 760px; margin: 0 auto; padding-top: 20px; }
.candle {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0;
  width: 74px; padding: 0 0 4px; background: none; border: 0; cursor: pointer;
  animation: riseIn .6s calc(var(--i) * 70ms) both;
}
.candle .flame {
  width: 16px; height: 26px; margin-bottom: 2px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 75%, #fff8d6 0 20%, #ffcf6b 35%, #ff7a1a 70%, transparent 72%);
  box-shadow: 0 0 18px 6px rgba(255,150,40,.45), 0 0 50px 10px rgba(255,120,30,.18);
  transform-origin: 50% 90%;
  animation: candleFlicker 1.6s ease-in-out infinite alternate;
}
.candle:nth-child(2n) .flame { animation-duration: 1.2s; }
.candle:nth-child(3n) .flame { animation-duration: 2s; }
.candle .wax {
  width: 30px; height: 70px;
  border-radius: 6px 6px 3px 3px;
  background:
    radial-gradient(circle at 30% 0, #fff3dc 0 6px, transparent 7px),
    radial-gradient(ellipse at 70% 18%, #f3e2c2 0 4px, transparent 5px),
    linear-gradient(90deg, #cbb594, #f4e6c8 45%, #b69d78);
  box-shadow: inset 0 8px 10px -6px rgba(255,190,90,.6), 0 8px 18px rgba(0,0,0,.6);
  position: relative;
}
.candle:nth-child(3n+1) .wax { height: 84px; }
.candle:nth-child(3n+2) .wax { height: 62px; }
.candle:nth-child(4n) .wax { height: 94px; }
.candle .wax::before { content: ""; position: absolute; top: -5px; left: 50%; width: 2px; height: 7px; margin-left: -1px; background: #1a1210; }
.candle b { margin-top: 10px; font: 700 13px/1 var(--f-head); letter-spacing: .08em; color: #f3e7d0; }
.candle:not(.snuffed):hover .flame { transform: scale(1.25); }
.candle:not(.snuffed):hover b { color: #fff; }
.candle.snuffed { cursor: not-allowed; opacity: .45; }
.candle.snuffed .flame { background: none; box-shadow: none; position: relative; }
.candle.snuffed .flame::after {
  content: ""; position: absolute; left: 6px; bottom: 0; width: 4px; height: 22px; border-radius: 4px;
  background: linear-gradient(transparent, rgba(200,200,210,.5)); filter: blur(2px);
  animation: smoke 2.4s ease-out infinite;
}
.candle.snuffed .wax { filter: grayscale(.6) brightness(.6); }
.candle.snuffed b { text-decoration: line-through; color: #77707f; }
.candle.picked .flame {
  width: 20px; height: 34px;
  background: radial-gradient(ellipse at 50% 75%, #fff 0 18%, #ff9cf0 35%, #ff2bd6 70%, transparent 72%);
  box-shadow: 0 0 22px 8px rgba(255,43,214,.55), 0 0 70px 16px rgba(255,43,214,.25);
}
.candle.picked b { color: var(--mag); text-shadow: 0 0 10px var(--mag); }
.candle:focus-visible { outline: 2px solid var(--grn); outline-offset: 4px; border-radius: 4px; }
@keyframes candleFlicker {
  0% { transform: scale(1) rotate(-2deg); opacity: .95; }
  50% { transform: scale(1.06, .94) rotate(2deg); opacity: 1; }
  100% { transform: scale(.96, 1.05) rotate(-1deg); opacity: .9; }
}
@keyframes smoke { from { transform: translateY(0) scaleX(1); opacity: .8; } to { transform: translateY(-26px) scaleX(2); opacity: 0; } }

/* ---- step 4: fields ---- */
.r-fields { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; }
.r-fields .field > span { display: block; }
.r-fields textarea {
  width: 100%; padding: 12px 14px; resize: vertical;
  background: rgba(5,4,6,.85); color: var(--text); border: 1px solid #3a3540; border-radius: 3px; font-size: 15px;
}
.r-fields textarea::placeholder { color: #9a93a3; }
.r-fields textarea:focus { outline: none; border-color: var(--mag); box-shadow: 0 0 0 1px var(--mag), 0 0 14px rgba(255,43,214,.35); }
.r-form .claimed { max-width: 760px; margin: 0 auto 14px; }

/* ---- step 5: the burial ---- */
.burial { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.epitaph {
  position: relative; z-index: 3; width: min(340px, 100%); padding: 34px 26px 22px; text-align: center;
  border-radius: 50% 50% 6px 6px / 22% 22% 6px 6px;
  background: linear-gradient(170deg, #55505e, #2b2830 55%, #1d1b21), var(--noise); background-blend-mode: overlay;
  border: 2px solid #6a6474;
  box-shadow: inset 0 0 0 6px #18161b, inset 0 0 0 8px #3d3944, 0 20px 40px rgba(0,0,0,.7);
}
.ep-rip { display: block; font: 700 30px/1 var(--f-head); letter-spacing: .2em; color: #e9e3ee; text-shadow: 0 2px 0 #000; }
.ep-line { display: block; margin: 8px 0 16px; font: italic 15px/1.4 Georgia, serif; color: #cfc7d6; }
.epitaph dl { display: grid; gap: 8px; margin: 0; }
.epitaph dl div { display: flex; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.epitaph dt { font: 700 10px/1.6 var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: #a59fae; }
.epitaph dd { font: 700 14px/1.4 var(--f-head); color: #fff; text-align: right; }

.coffin3d { position: relative; width: 190px; height: 300px; }
.coffin-box, .coffin-lid, .coffin-satin { clip-path: polygon(28% 0, 72% 0, 100% 21%, 84% 100%, 16% 100%, 0 21%); }
.coffin-box {
  position: absolute; inset: 0; padding: 12px;
  background: linear-gradient(90deg, #24150f, #4a2c1d 50%, #24150f);
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.8));
}
.coffin-satin {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle, rgba(255,255,255,.18) 0 1.5px, transparent 2.5px) 0 0 / 18px 18px,
    radial-gradient(ellipse at 50% 30%, #6a1f63, #2a0a27 60%, #12040f);
  box-shadow: inset 0 0 30px #000;
}
.coffin-lid {
  position: absolute; inset: 0; z-index: 4;
  background:
    linear-gradient(90deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.35)),
    repeating-linear-gradient(92deg, #3a2318 0 6px, #43291c 6px 14px, #351f15 14px 22px);
  transform: translate(62%, -14%) rotate(16deg);
  transform-origin: 50% 50%;
  box-shadow: inset 0 0 20px #000;
}
.lid-cross { position: absolute; left: 50%; top: 18%; width: 16px; height: 46%; margin-left: -8px; background: linear-gradient(#c8a46a, #7a5a2c); box-shadow: 0 0 6px rgba(0,0,0,.6); }
.lid-cross::after { content: ""; position: absolute; left: -22px; right: -22px; top: 24%; height: 14px; background: inherit; }
.lid-text {
  position: absolute; left: 0; right: 0; bottom: 14%; text-align: center;
  font: 400 30px/1 var(--f-brush); color: #ffd0f6; opacity: 0;
  text-shadow: 0 0 6px var(--mag), 0 0 16px var(--mag), 0 0 30px var(--mag);
}
.dust { position: absolute; left: -40%; right: -40%; bottom: -10px; height: 60px; pointer-events: none; opacity: 0; }
.dust::before, .dust::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 60%, rgba(180,170,190,.45), transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(180,170,190,.4), transparent 50%);
  filter: blur(8px);
}

/* the burial sequence */
.burying .epitaph { animation: lowerIn 1.25s cubic-bezier(.55,0,.75,.4) forwards; }
.burying .coffin-lid { animation: slamLid .55s 1.25s cubic-bezier(.6,0,.9,.5) forwards; }
.burying .coffin3d { animation: thud .45s 1.8s ease-out; }
.burying .dust { animation: dustPuff 1.2s 1.78s ease-out forwards; }
.burying .lid-text { animation: neonOn 1s 2.1s forwards; }
@keyframes lowerIn {
  0% { transform: none; }
  25% { transform: translateY(-14px) rotate(-2deg); }
  100% { transform: translateY(var(--drop, 300px)) scale(.28); opacity: 0; }
}
@keyframes slamLid { to { transform: none; } }
@keyframes thud { 0%, 100% { transform: none; } 20% { transform: translate(-4px, 3px) rotate(-1deg); } 45% { transform: translate(4px, -2px) rotate(1deg); } 70% { transform: translate(-2px, 1px); } }
@keyframes dustPuff { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5) translateY(-16px); } }
@keyframes neonOn { 0%, 30%, 50% { opacity: 0; } 20%, 40%, 100% { opacity: 1; } }

/* ---- nav row + done ---- */
.r-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 760px; margin: 30px auto 0; }
.r-nav .r-back[hidden] + .r-error { margin-left: 0; }
.r-error { flex: 1; text-align: center; color: #ff8fa3; font-size: 14px; min-height: 1em; }
.r-nav .btn { min-width: 120px; }
.r-nav .btn[hidden] { display: none; }
.r-done { max-width: 620px; margin: 0 auto; text-align: center; animation: panelIn .8s cubic-bezier(.2,.7,.2,1); }
.r-done h2 { margin: 10px 0 14px; font: 400 clamp(36px, 8vw, 60px)/1 var(--f-brush); }
.r-done p { color: #d6cfdc; }
.r-done .cta-row { justify-content: center; margin-top: 24px; }

@media (min-width: 700px) {
  .r-artists { grid-template-columns: repeat(5, 1fr); align-items: end; }
  .r-fate { grid-column: auto; flex-direction: column; gap: 4px; }
  .fate-stone { width: 100%; max-width: 160px; }
  .fate-stone em { font-size: 64px; }
  .r-fields { grid-template-columns: 1fr 1fr; }
  .r-wide { grid-column: 1 / -1; }
  .r-cal { padding: 24px 26px 20px; }
  .r-dow, .r-grid { gap: 10px; }
  .candle { width: 86px; }
}
@media (min-width: 900px) {
  .ritual { padding: 70px 0 90px; }
  .ritual-bg { background-size: 340px auto, 340px auto, auto, auto, auto; }
}

@media (prefers-reduced-motion: reduce) {
  .stone, .candle, .r-panel.is-active, .r-done { animation: none; }
  .candle .flame { animation: none; }
  .burying .epitaph, .burying .coffin-lid, .burying .coffin3d, .burying .dust, .burying .lid-text { animation: none; }
}

/* =========================================================
   ART PACK — painted stones, candles, coffin, headstone, dust
   (overrides the code-drawn versions above)
   ========================================================= */
.stone, .stone:not(.taken), .stone.taken, .stone.picked, .stone.picked:hover {
  border: 0; border-radius: 0; box-shadow: none;
  background: url("assets/ritual/stone.webp") center bottom / contain no-repeat;
}
.stone { filter: drop-shadow(0 4px 4px rgba(0,0,0,.7)); color: #f1ecf4; }
.stone span { top: 2%; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.95); }
.stone:not(.taken) { filter: drop-shadow(0 0 6px rgba(57,255,136,.4)) drop-shadow(0 4px 4px rgba(0,0,0,.7)); }
.stone:not(.taken):hover { filter: drop-shadow(0 0 14px rgba(57,255,136,.85)); }
.stone.taken { background-image: url("assets/ritual/stone-cracked.webp"); color: #9a93a3; }
.stone.taken::after { display: none; }
.stone.past { background-image: url("assets/ritual/stone.webp"); filter: grayscale(1) brightness(.55); }
.stone.picked, .stone.picked:hover { filter: drop-shadow(0 0 14px rgba(255,43,214,.95)) brightness(1.12); transform: translateY(-4px); }
.stone.picked span { color: #ffd0f6; text-shadow: 0 0 8px var(--mag), 0 1px 0 #000; }
.stone.picked::before { top: 22%; text-shadow: 0 0 6px var(--mag), 0 1px 0 #000; }
.lg-open { background: url("assets/ritual/stone.webp") center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 0 4px rgba(57,255,136,.8)); }
.lg-taken { background: url("assets/ritual/stone-cracked.webp") center / contain no-repeat; border: 0; }

.candle { width: 58px; }
.candle-img { position: relative; display: block; width: 44px; }
.candle:nth-child(3n+1) .candle-img { width: 50px; }
.candle:nth-child(3n+2) .candle-img { width: 40px; }
.candle:nth-child(4n) .candle-img { width: 54px; }
.candle-img img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.75)); transition: filter .3s; }
.candle .glow {
  position: absolute; left: 50%; top: 6%; width: 150%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,175,70,.55), transparent 65%); mix-blend-mode: screen;
  transform: translate(-50%, -50%); animation: glowFlicker 1.4s ease-in-out infinite alternate;
}
.candle:nth-child(2n) .glow { animation-duration: 1.1s; }
.candle:not(.snuffed):hover .glow { width: 200%; }
.candle.snuffed { opacity: .7; }
.candle.snuffed .glow { display: none; }
.candle.picked .glow { width: 220%; background: radial-gradient(circle, rgba(255,43,214,.8), transparent 65%); }
.candle.picked .candle-img img { filter: drop-shadow(0 0 14px rgba(255,43,214,.75)); }
@keyframes glowFlicker {
  from { opacity: .7; transform: translate(-50%, -50%) scale(.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.fate-stone { width: 110px; aspect-ratio: 4 / 5; background: none; border: 0; border-radius: 0; box-shadow: none; }
.fate-stone img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 14px rgba(57,255,136,.35)); }
@media (min-width: 700px) { .fate-stone { width: 100%; max-width: 170px; } }

.epitaph {
  --drop: 392px;
  display: flex; flex-direction: column; justify-content: center;
  width: min(360px, 100%); aspect-ratio: 900 / 1100; padding: 26% 19% 24%;
  border: 0; border-radius: 0; box-shadow: none;
  background: url("assets/ritual/headstone.webp") center / contain no-repeat;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.8));
}
.ep-rip { font-size: 24px; }
.ep-line { margin: 4px 0 10px; font-size: 13px; }
.epitaph dl { gap: 3px; }
.epitaph dl div { padding-top: 4px; }
.epitaph dt { font-size: 9px; }
.epitaph dd { font-size: 12.5px; }

.coffin3d { width: 200px; height: 300px; }
.coffin-box { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; clip-path: none; background: none; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0,0,0,.85)); }
.coffin-lid { clip-path: none; background: none; box-shadow: none; }
.coffin-lid img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(0,0,0,.8)); }
.lid-text { bottom: 18%; }
.dust { left: -70%; right: -70%; bottom: -40px; height: auto; aspect-ratio: 3 / 1; background: url("assets/ritual/dust.webp") center / contain no-repeat; }
.dust::before, .dust::after { display: none; }
.epitaph { padding: 26% 17% 24%; }
.epitaph dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.epitaph dt { flex: none; }
.dust { z-index: 3; }

/* the epitaph's % padding resolves against .burial's width, so keep .burial as wide as the stone
   (on desktop it was the full panel width, which pushed the words off the stone and stretched it tall) */
.burial { width: min(360px, 100%); margin: 0 auto; }
@media (min-width: 900px) {
  .burial { width: 300px; gap: 6px; }
  .epitaph { width: 300px; --drop: 318px; }
  .coffin3d { width: 170px; height: 255px; }
  .ep-rip { font-size: 21px; }
  .ep-line { font-size: 12px; margin: 2px 0 8px; }
  .epitaph dd { font-size: 12px; }
}
.epitaph { padding: 26% 23% 25%; }
.epitaph dl div { gap: 6px; }