/* ==================================================================
   VIRTUAL CANDLE (1.1.0)
   A warm default look, and the Hermitage's three themes, each in
   light and dark. The flame moves slowly and smoothly: no flicker, no
   flashing, and it stands still under reduced motion.
================================================================== */
.candle {
    --cd-ink: #3b2f22; --cd-muted: #7a6a55; --cd-line: #e2d6c3; --cd-chip: #f7f0e4;
    --cd-wax: #f4ead8; --cd-wax-shade: #ddcdb2; --cd-dish: #c9b79a; --cd-wick: #3a2c20;
    --cd-btn: #a0521d; --cd-btn-ink: #fffaf2; --cd-accent: #a0521d;
    color: var(--cd-ink);
    text-align: center;
    max-width: 420px;
    margin: 1.5rem auto;
    padding: 1rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* wax colours by theme (public embeds can ask for a theme too) */
.candle[data-theme="secular"]  { --cd-wax: #f1ede6; --cd-wax-shade: #d8d1c4; }
.candle[data-theme="buddhist"] { --cd-wax: #f3dfb8; --cd-wax-shade: #d9b77e; }
.candle[data-theme="pagan"]    { --cd-wax: #e9e2c8; --cd-wax-shade: #c7bd94; }

/* inside the Hermitage the candle uses exactly the Hermitage colours (the same
   values as the Hermitage Timer); secular when no theme is given */
.candle.is-hermitage {
    --cd-ink: #2c2a26; --cd-muted: #6f6a60; --cd-line: #d4ccbd; --cd-chip: #f1ede4;
    --cd-btn: #6d7f6a; --cd-btn-ink: #fbfaf6; --cd-accent: #6d7f6a; --cd-dish: #b9b1a1;
}
.candle.is-hermitage[data-theme="buddhist"] { --cd-btn: #8e3b2a; --cd-btn-ink: #fff8ef; --cd-accent: #b2621c; --cd-chip: #f6ecdd; --cd-dish: #d1a46c; }
.candle.is-hermitage[data-theme="pagan"]    { --cd-btn: #3f5a2f; --cd-btn-ink: #f6f8ef; --cd-accent: #4d6b3a; --cd-chip: #edf0e3; --cd-dish: #9aa67f; }

/* dark colours only inside the Hermitage, whose own page turns dark with them;
   a public embed keeps the light colours, since the site around it may be light */
@media (prefers-color-scheme: dark) {
    .candle.is-hermitage {
        --cd-ink: #ece7dd; --cd-muted: #aaa293; --cd-line: #403c33; --cd-chip: #26241f;
        --cd-btn: #a3b69f; --cd-btn-ink: #1b1a17; --cd-accent: #a3b69f; --cd-dish: #6c665a; --cd-wick: #141310;
    }
    .candle.is-hermitage[data-theme="buddhist"] { --cd-btn: #e59a4f; --cd-btn-ink: #24140a; --cd-accent: #e59a4f; --cd-chip: #2a2119; --cd-dish: #7d5a37; }
    .candle.is-hermitage[data-theme="pagan"]    { --cd-btn: #9fbf86; --cd-btn-ink: #141a0f; --cd-accent: #9fbf86; --cd-chip: #222819; --cd-dish: #5f6b4c; }
}

.cd-stage { width: min(56vw, 200px); margin: 0 auto; }
.cd-art { display: block; width: 100%; height: auto; overflow: visible; }
.cd-dish { fill: var(--cd-dish); }
.cd-body { fill: url(#cd-wax-grad); }
.cd-wax-edge { stop-color: var(--cd-wax-shade); }
.cd-wax-mid { stop-color: var(--cd-wax); }
.cd-top { fill: var(--cd-wax-shade); }
.cd-puddle { fill: var(--cd-wax-shade); opacity: 0; }
.cd-wick { stroke: var(--cd-wick); stroke-width: 2.5; stroke-linecap: round; }
.cd-glow { fill: url(#cd-glow-grad); opacity: 0; }
.cd-flame { fill: url(#cd-flame-grad); }
.cd-flame-core { fill: #fffdf3; opacity: .85; }
.cd-flame-g { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transition: opacity 1.2s ease; }

.candle[data-state="lit"] .cd-flame-g { opacity: 1; animation: cd-sway 4.2s ease-in-out infinite alternate; }
.candle[data-state="lit"] .cd-glow { opacity: .75; animation: cd-glow 6.5s ease-in-out infinite alternate; }
.candle[data-state="none"] #cd-body-g { opacity: .25; }
.candle[data-state="burnt"] #cd-body-g { opacity: 0; }
.candle[data-state="burnt"] .cd-puddle { opacity: 1; }

/* slow, continuous movement only: well under 3 changes a second */
@keyframes cd-sway {
    0%   { transform: rotate(-2.2deg) scaleY(.97); }
    50%  { transform: rotate(1.2deg) scaleY(1.03); }
    100% { transform: rotate(2.2deg) scaleY(.99); }
}
@keyframes cd-glow { from { opacity: .62; } to { opacity: .82; } }
@media (prefers-reduced-motion: reduce) {
    .candle[data-state="lit"] .cd-flame-g, .candle[data-state="lit"] .cd-glow { animation: none; }
    .cd-flame-g { transition: none; }
}

.cd-status { margin: .9rem 0 0; font-size: 1.1rem; }
.cd-time { margin: .1rem 0 0; min-height: 1.4em; color: var(--cd-muted); font-size: .92rem; font-variant-numeric: tabular-nums; }
.cd-for { margin: .4rem 0 0; font-style: italic; }

.cd-choose { margin: 1rem 0 0; text-align: left; }
.cd-choose fieldset { border: 0; margin: 0; padding: 0; }
.cd-choose legend, .cd-for-label { font-size: .85rem; color: var(--cd-muted); }
.cd-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.cd-sizes label { position: relative; }
.cd-sizes input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.cd-sizes span { display: block; padding: 7px 0; text-align: center; border-radius: 8px; border: 1px solid var(--cd-line); background: var(--cd-chip); cursor: pointer; font-variant-numeric: tabular-nums; }
.cd-sizes input:checked + span { background: var(--cd-accent); border-color: var(--cd-accent); color: var(--cd-btn-ink); }
.cd-sizes input:focus-visible + span { outline: 2px solid var(--cd-accent); outline-offset: 2px; }
.cd-size-words { margin: 6px 0 0; font-size: .85rem; color: var(--cd-muted); }
.cd-for-label { display: block; margin-top: .9rem; }
.cd-optional { font-size: .78rem; }
.cd-for-label input {
    display: block; width: 100%; box-sizing: border-box; margin-top: 4px; font: inherit; font-size: .95rem; padding: 7px 9px;
    color: var(--cd-ink); background: var(--cd-chip); border: 1px solid var(--cd-line); border-radius: 8px;
}

.cd-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 1rem; }
.cd-btn {
    font: inherit; font-size: 1.05rem; min-width: 11rem; min-height: 44px; padding: 8px 20px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--cd-btn); background: transparent; color: var(--cd-ink);
}
.cd-btn.is-main { background: var(--cd-btn); color: var(--cd-btn-ink); }
.cd-btn:focus-visible, .cd-link:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 3px; }
.cd-link { font: inherit; font-size: .88rem; background: none; border: 0; padding: 4px 6px; color: var(--cd-muted); text-decoration: underline; cursor: pointer; }
.cd-confirm { font-size: .88rem; color: var(--cd-ink); }

.cd-world { margin: 1.1rem 0 0; font-size: .9rem; color: var(--cd-muted); }
.cd-world strong { color: var(--cd-ink); font-variant-numeric: tabular-nums; }
.cd-share-row { margin: .8rem 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cd-share { font: inherit; font-size: .92rem; min-height: 40px; padding: 6px 16px; border-radius: 999px; cursor: pointer;
            border: 1px solid var(--cd-line); background: var(--cd-chip); color: var(--cd-ink); }
.cd-share:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 3px; }
.cd-share-msg { font-size: .82rem; color: var(--cd-muted); min-height: 1.2em; margin: 0; }
.cd-ask { max-width: 340px; width: calc(100% - 32px); padding: 18px 18px 14px; border: 1px solid var(--cd-line); border-radius: 14px;
          background: var(--cd-chip); color: var(--cd-ink); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.cd-ask::backdrop { background: rgba(20, 14, 8, .45); }
.cd-ask-title { margin: 0; font-size: 1.05rem; font-weight: 600; }
.cd-ask-words { margin: .5rem 0 0; font-style: italic; overflow-wrap: anywhere; }
.cd-ask-note { margin: .5rem 0 0; font-size: .85rem; color: var(--cd-muted); }
.cd-ask-buttons { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; }
.cd-home { margin: .6rem 0 0; font-size: .85rem; }
.cd-home a { color: var(--cd-muted); }

.candle.is-embed, .candle.is-hermitage { margin: 0 auto; }