/* === Campfire Visualizer === */
.coal-glow {
    opacity: 0.35;
    fill: #aa2200;
    transition: opacity 4s ease-in-out, fill 4s ease-in-out, filter 4s ease-in-out;
    animation: coal-pulse-idle 3s infinite alternate ease-in-out;
}

.campfire-svg.is-burning .coal-glow {
    opacity: 0.9;
    fill: #ff5500;
    animation-name: coal-pulse-active;
}

@keyframes coal-pulse-idle {
    from { filter: brightness(0.7); }
    to   { filter: brightness(1.0); }
}

@keyframes coal-pulse-active {
    from { filter: brightness(0.8); }
    to   { filter: brightness(1.4); }
}

.campfire-card {
    align-items: center;
    text-align: center;
}

.campfire-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
    min-height: 150px;
}

.campfire-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 30px));
    width: 100vw;
    height: 100vh;
    max-width: none;
    pointer-events: none;
    z-index: 10;
}

.campfire-svg {
    overflow: visible;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.campfire-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.bg-grass {
    position: relative;
    transform: none;
    top: auto;
    left: auto;
    z-index: 1;
}

.coals-svg {
    width: 200px;
    height: 200px;
    z-index: 2;
    overflow: visible;
    transform: translate(-50%, -45%);
}

.ash-cover {
    z-index: 3;
}

.log-bottom {
    z-index: 4;
}

.campfire-canvas.fire-canvas {
    z-index: 5;
}

.log-top {
    z-index: 6;
}

.campfire-canvas.smoke-canvas {
    z-index: 7;
    transform: translate(-50%, calc(-50% - 20px));
}