/* Soft photographic edges; the centre and every interactive control stay sharp. */
#candles-panel,
#incense-panel {
  background: radial-gradient(ellipse at 50% 25%, #38272bd9, #1b131beb 75%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#candles-panel > article,
#incense-panel > article {
  max-width: 700px;
  padding: 30px 28px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#candles-panel > article > h2,
#incense-panel > article > h2 {
  padding-right: 30px;
  margin-top: 16px;
  font-size: clamp(29px, 4vw, 38px);
  line-height: 1.22;
  text-wrap: balance;
}
#candles-panel > article > .eyebrow,
#incense-panel > article > .eyebrow { font-size: 10px; letter-spacing: 2.5px; }
#candles-panel .close,
#incense-panel .close {
  top: 13px;
  right: 5px;
  min-width: 44px;
  min-height: 44px;
  color: #efddc0;
}
#candles-panel .candle-table-scene,
#incense-panel .incense-altar {
  width: min(100%, 470px);
  max-width: none;
  aspect-ratio: 2 / 3;
  max-height: none;
  margin: 20px auto 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 88%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 88%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
#candles-panel .candle-table-photo,
#candles-panel .candle-holder-front,
#incense-panel .incense-altar > img { object-fit: fill; }
#candles-panel .candle-table-caption,
#incense-panel .incense-table-label {
  bottom: 8%;
  padding: 18px 12px;
  gap: 8px;
  background: transparent;
  color: #fff0d3;
  text-shadow: 0 2px 6px #130d11, 0 0 18px #130d11;
}
#candles-panel .candle-table-caption span:first-child,
#incense-panel .incense-table-label span:first-child { font-size: 23px; }
#candles-panel .candle-table-caption span:last-child,
#incense-panel .incense-table-label span:last-child { font: 13px/1.6 system-ui, sans-serif; letter-spacing: 1.6px; }

/* The pointed outline, pale inner core and dark wick are separate details. */
#candles-panel .table-wick {
  left: 50.3%;
  bottom: 94%;
  width: clamp(9px, 7.5%, 13px);
  height: 38px;
  border-radius: 0;
  background: none;
  filter: drop-shadow(0 0 4px #ffb34b90) drop-shadow(0 0 14px #ffb74b40);
  transform-origin: 50% 100%;
  transform: translateX(-50%);
}
#candles-panel .table-wick::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 64'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop stop-color='%23ffae38'/%3E%3Cstop offset='.34' stop-color='%23ffe49c'/%3E%3Cstop offset='.75' stop-color='%23ffce6b'/%3E%3Cstop offset='1' stop-color='%23ffb64e' stop-opacity='.55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23f)' d='M10 63C1 61 1 51 4 41C7 30 12 15 10 1C15 15 13 28 16 41C20 54 18 62 10 63Z'/%3E%3Cpath fill='%23fff7d2' d='M10 61C5 60 5 54 7 48C9 42 11 35 10 29C14 41 16 56 10 61Z'/%3E%3Cpath fill='%237795b0' opacity='.7' d='M7 61Q9 54 11 55Q14 59 13 62Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
#candles-panel .table-wick::after {
  content: '';
  position: absolute;
  left: calc(50% - 1px);
  bottom: -4px;
  width: 2px;
  height: 7px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(#df9b4f, #332119 60%);
  transform: rotate(5deg);
}
#candles-panel .candle-table-scene.lit .table-wick { animation: polished-candle-flame 3.4s ease-in-out infinite; }
@keyframes polished-candle-flame {
  0%, 100% { transform: translateX(-50%) rotate(-1.5deg) scaleY(.98); }
  28% { transform: translateX(-50%) rotate(1deg) scaleY(1.035); }
  62% { transform: translateX(-50%) rotate(-.5deg) scaleY(.96); }
}

/* The ember sits on the photographed tip, independent of viewport size. */
#incense-panel .incense-ember {
  left: 60%;
  top: 32.15%;
  width: 6px;
  height: 8px;
  transform: translate(-50%, -50%) rotate(14deg);
  border-radius: 48% 48% 40% 40%;
  background: radial-gradient(ellipse at 50% 40%, #fff6c7, #ffb746 32%, #f45c1a 65%, #8d2618 95%);
  box-shadow: 0 0 3px #ffe1a3, 0 0 9px #ff973cb3, 0 0 21px #e36c3540;
}
#incense-panel .lit .incense-ember { opacity: 1; animation: polished-ember 4.8s ease-in-out infinite; }
@keyframes polished-ember {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.23); }
}
#incense-panel .incense-light-flame {
  left: 60%;
  top: 32.15%;
  width: 8px;
  height: 28px;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  border-radius: 80% 20% 45% 45% / 80% 75% 25% 25%;
  background: linear-gradient(to top, #ffae45, #fff0bd 35%, #ffd777 73%, #f6b95800);
  filter: drop-shadow(0 0 5px #ffb55388);
}
#incense-panel .lighting .incense-light-flame { animation: polished-incense-light 2.6s ease-out both; }
@keyframes polished-incense-light {
  0% { opacity: 0; transform: translate(-50%, -100%) scaleY(.3); }
  23%, 53% { opacity: .9; transform: translate(-50%, -100%) scaleY(1); }
  100% { opacity: 0; transform: translate(-50%, -100%) scaleY(.4); }
}
#incense-panel .table-incense-smoke {
  left: 50%;
  top: 10.15%;
  width: 20%;
  height: 22%;
}
#incense-panel .lit .table-incense-smoke { opacity: .82; }
#incense-panel .table-incense-smoke i {
  bottom: 0;
  left: 50%;
  width: 25%;
  height: 84%;
  border-left: 1.5px solid #efe4d199;
  border-radius: 48% 36% 45% 30%;
  filter: blur(1.1px);
  transform-origin: 0 100%;
  animation: polished-incense-smoke 8s ease-out infinite;
}
#incense-panel .table-incense-smoke i:nth-child(2) { animation-delay: -2s; border-color: #efe4d170; }
#incense-panel .table-incense-smoke i:nth-child(3) { animation-delay: -4s; }
#incense-panel .table-incense-smoke i:nth-child(4) { animation-delay: -6s; border-color: #efe4d160; }
@keyframes polished-incense-smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(.28, .2) rotate(-7deg); }
  17% { opacity: .7; }
  53% { opacity: .44; transform: translate(-4px, -17px) scale(.85, .85) rotate(10deg); }
  100% { opacity: 0; transform: translate(10px, -38px) scale(1.3, 1.1) rotate(-9deg); }
}

#candles-panel label,
#incense-panel label { color: #ecd4b2; font-size: 14px; }
#candles-panel button:not(.close),
#incense-panel button:not(.close) { min-height: 46px; font-size: 14px; }
#candles-panel select,
#candles-panel textarea { background: #251923a3; color: #f7e7d4; border-color: #d3b68166; }
#candles-panel textarea { padding: 14px; line-height: 1.7; }
#candles-panel #candle-create,
#incense-panel #incense-ignite {
  background: linear-gradient(115deg, #c29c68, #ead1a5, #c09a69);
  color: #2a1924;
  border-color: #e3c899;
}
#candles-panel #candle-new { margin: 0 auto 32px; background: transparent; border-color: #d3b68155; }
#candles-panel #candles > article { background: transparent; box-shadow: none; border: 0; border-top: 1px solid #d3b68133; border-radius: 0; }
#incense-panel #incense-options .library-choice { background: #261b23b3; min-height: 62px; font-size: 13px; line-height: 1.5; }
#incense-panel #incense-options .library-choice.chosen { background: #554034a8 !important; }
#candles-panel .small { font-size: 12px; line-height: 1.7; }
#incense-panel #incense-feedback,
#candles-panel #candle-feedback { color: #e7d3bc; font: 13px/1.7 system-ui, sans-serif; }

@media (max-width: 650px) {
  #candles-panel > article,
  #incense-panel > article { padding: 26px 8px; }
  #candles-panel .candle-table-scene,
  #incense-panel .incense-altar { width: 100%; margin-top: 12px; }
  #candles-panel .table-wick { height: 32px; width: 10px; }
  #incense-panel .incense-ember { width: 5px; height: 7px; }
  #incense-panel .incense-controls { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #candles-panel .candle-table-scene.lit .table-wick,
  #incense-panel .lit .incense-ember,
  #incense-panel .lighting .incense-light-flame,
  #incense-panel .table-incense-smoke i { animation: none; }
  #incense-panel .lighting .incense-light-flame { opacity: 0; }
  #incense-panel .table-incense-smoke i { opacity: .25; }
}