.candle-explorer {
    --candle-radius: 360px;
    --candle-x: 50vw;
    --candle-y: 50vh;
    --candle-light-x: var(--candle-x);
    --candle-light-y: var(--candle-y);
    --candle-spread: 1;
    --candle-glow: .11;
    --candle-layer: 1080;
    color: #694e35;
    font-family: inherit;
}

.candle-explorer[hidden],
.candle-explorer [hidden] {
    display: none !important;
}

.candle-explorer__dock {
    position: fixed;
    z-index: 1030;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    transition: opacity .25s ease, transform .25s ease;
}

.candle-explorer__pickup {
    position: relative;
    width: 70px;
    height: 104px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.candle-explorer__pickup:focus-visible,
.candle-explorer__leave:focus-visible {
    outline: 2px solid #B17B38;
    outline-offset: 4px;
}

.candle-explorer__art {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.candle-explorer__pickup .candle-explorer__art {
    transition: transform .2s ease;
}

.candle-explorer__pickup:hover .candle-explorer__art {
    transform: translateY(-3px);
}

.candle-explorer__flame {
    transform-origin: 44px 44px;
    transform: rotate(var(--candle-flame-lean, 0deg))
        skewX(var(--candle-flame-skew, 0deg))
        scale(var(--candle-flame-width, 1), var(--candle-flame-height, 1));
    filter: drop-shadow(0 0 var(--candle-flame-glow, 5px) rgba(255, 214, 89, .48));
}

.candle-explorer__pickup .candle-explorer__flame {
    transition: transform .2s ease-in-out, filter .2s ease-in-out;
}

.candle-explorer__darkness {
    position: fixed;
    inset: 0;
    z-index: var(--candle-layer);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: radial-gradient(
        ellipse calc(var(--candle-radius) * var(--candle-spread)) calc(var(--candle-radius) * var(--candle-spread) * .88) at var(--candle-light-x) var(--candle-light-y),
        rgba(32, 22, 15, .02) 0%, rgba(32, 22, 15, .09) 20%, rgba(32, 22, 15, .25) 40%,
        rgba(27, 20, 15, .48) 64%, rgba(24, 19, 15, .67) 84%, rgba(22, 18, 15, .82) 100%);
    transition: opacity .45s ease, visibility .45s;
}

.candle-explorer__darkness::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse calc(var(--candle-radius) * var(--candle-spread) * .76) calc(var(--candle-radius) * var(--candle-spread) * .65) at var(--candle-light-x) var(--candle-light-y),
        rgba(255, 237, 130, calc(var(--candle-glow) * 1.4)) 0%,
        rgba(255, 221, 58, calc(var(--candle-glow) * .95)) 24%,
        rgba(255, 210, 42, calc(var(--candle-glow) * .35)) 52%, transparent 82%);
}

.candle-explorer__carried {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--candle-layer) + 1);
    width: 58px;
    height: 100px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
}

.candle-explorer__ghosts {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* Mask each pixel, so a ghost is revealed only where the light touches it. */
    -webkit-mask-image: radial-gradient(
        ellipse calc(var(--candle-radius) * var(--candle-spread) * .78) calc(var(--candle-radius) * var(--candle-spread) * .68) at var(--candle-light-x) var(--candle-light-y),
        #000 0%, #000 35%, rgba(0, 0, 0, .7) 52%, rgba(0, 0, 0, .25) 72%, transparent 100%);
    mask-image: radial-gradient(
        ellipse calc(var(--candle-radius) * var(--candle-spread) * .78) calc(var(--candle-radius) * var(--candle-spread) * .68) at var(--candle-light-x) var(--candle-light-y),
        #000 0%, #000 35%, rgba(0, 0, 0, .7) 52%, rgba(0, 0, 0, .25) 72%, transparent 100%);
}

.candle-explorer__ghost {
    position: absolute;
    left: -100px;
    top: var(--ghost-y);
    width: var(--ghost-size);
    animation: candle-ghost-drift var(--ghost-duration) linear var(--ghost-delay) infinite;
    animation-direction: var(--ghost-direction);
    animation-play-state: paused;
}

.candle-explorer__ghost-art {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(234, 208, 255, .2));
    animation: candle-ghost-bob 3.6s ease-in-out var(--ghost-delay) infinite alternate;
    animation-play-state: paused;
}

.candle-explorer.is-active:not(.is-paused) .candle-explorer__ghost,
.candle-explorer.is-active:not(.is-paused) .candle-explorer__ghost-art {
    animation-play-state: running;
}

@keyframes candle-ghost-drift {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100vw + 200px)); }
}

@keyframes candle-ghost-bob {
    from { transform: translateY(-9px) rotate(-6deg); }
    to { transform: translateY(9px) rotate(6deg); }
}

.candle-explorer__carried .candle-explorer__flame {
    filter: drop-shadow(0 0 var(--candle-flame-glow, 6px) rgba(255, 214, 89, .55));
}

.candle-explorer__controls {
    position: fixed;
    z-index: calc(var(--candle-layer) + 2);
    right: max(20px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.candle-explorer__instructions {
    color: #FFF4DE;
    text-shadow: 0 1px 5px rgba(35, 24, 16, .65);
    font-size: 12px;
    line-height: 1.5;
    max-width: 220px;
}

.candle-explorer__leave {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 17px;
    border: 1px solid rgba(235, 210, 174, .4);
    border-radius: 30px;
    background: #292017;
    color: #FFF1D9;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

.candle-explorer__leave:hover {
    background: #403024;
    border-color: #DDC19A;
}

.candle-explorer__leave span {
    font-size: 22px;
    line-height: 1;
}

.candle-explorer.is-active .candle-explorer__darkness,
.candle-explorer.is-active .candle-explorer__carried {
    opacity: 1;
    visibility: visible;
}

.candle-explorer.is-active .candle-explorer__dock {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
}

.candle-explorer__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
    .candle-explorer { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .candle-explorer__ghost {
        left: var(--ghost-rest-x);
    }
    .candle-explorer *, .candle-explorer *::before, .candle-explorer *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media print {
    .candle-explorer { display: none !important; }
}