/**
 * Howei Event Flame - container, glow and responsive layout.
 * The actual particle rendering lives on the <canvas>; this file is purely
 * chrome around it (sizing, centring, glow, debug readout).
 */

/* Combined chimes+flame stage: the flame becomes a full-bleed background
   layer behind the windchimes instead of its own separate section below
   them. Height is driven entirely by the windchimes content (the flame is
   taken out of flow via position:absolute and just stretches to fill
   whatever height that content establishes - see HoweiEventFlame.js's
   ResizeObserver, which keeps the canvas in sync as that height changes). */
.howei-chime-flame-stage {
    position: relative;
}

.howei-chime-flame-stage .howei-event-flame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 0;
}

.howei-chime-flame-stage #howei-event-chimes {
    position: relative;
    z-index: 1;
    background: transparent; /* let the flame show through behind the letters instead of the windchime widget's own flat tint */
}

.howei-event-flame {
    position: relative;
    width: 100%;
    /* 30% shorter than the original clamp(160px, 20vw, 300px) - the fire
       itself renders low in this box (particles rise from near the
       bottom), so most of that extra height was blank space above the
       flames, not more visible animation. */
    height: clamp(112px, 14vw, 210px);
    margin: 10px auto 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.howei-event-flame::before {
    content: "";
    position: absolute;
    inset: 20% 20% 0;
    background: var(--howei-flame-glow, rgba(255, 107, 53, 0.35));
    filter: blur(45px);
    opacity: 0.35;
    pointer-events: none;
}

.howei-flame-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: pan-y; /* vertical page scroll always wins over the flame's own touch handling */
}

.howei-flame-debug {
    max-width: 620px;
    margin: 10px auto 0;
    padding: 12px 16px;
    border: 1px dashed #bbb;
    border-radius: 8px;
    background: #fafafa;
    font-size: 12px;
    color: #333;
    font-family: monospace;
}

.howei-flame-debug-row {
    margin-top: 4px;
}

.howei-flame-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin: 0 4px 0 8px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

@media (max-width: 480px) {
    .howei-event-flame {
        height: clamp(91px, 22vw, 154px);
    }
}