.candles-page{
    min-height:100vh;
    padding:140px var(--page-gutter) 90px;
}

.candles-sanctuary{
    width:min(1180px, 100%);
    min-height:520px;
    margin:auto;
    display:grid;
    align-content:center;
}

.candles-loading{
    color:var(--text-muted);
    text-align:center;
}

.candles-status{
    width:min(620px, 100%);
    margin:auto;
    padding:52px 32px;
    border:1px solid rgba(129,197,255,.18);
    border-radius:24px;
    background:rgba(3,17,31,.68);
    color:var(--text-muted);
    text-align:center;
}

.candles-status h1{
    margin:0 0 18px;
    color:var(--text);
    font-size:clamp(2.2rem, 6vw, 3.6rem);
}

.candles-status p{
    margin:0 auto 24px;
    line-height:1.7;
}

.candles-status-flame{
    display:block;
    margin-bottom:16px;
    font-size:2.4rem;
    filter:drop-shadow(0 0 15px rgba(255,194,96,.45));
    animation:candle-status-breathe 2.2s ease-in-out infinite alternate;
}

.candles-action-message{
    min-height:1.4em;
    margin:18px 0 0;
    color:var(--text-muted);
    font-size:.9rem;
}

.candles-introduction{
    width:min(700px, 100%);
    margin:auto;
    padding:64px 42px;
    border:1px solid rgba(129,197,255,.2);
    border-radius:28px;
    background:
        radial-gradient(circle at 50% 25%, rgba(92,201,255,.13), transparent 42%),
        rgba(3,17,31,.68);
    box-shadow:0 30px 90px rgba(0,0,0,.35), inset 0 0 45px rgba(75,163,255,.04);
    backdrop-filter:blur(15px);
    text-align:center;
}

.candles-symbol{
    margin-bottom:15px;
    font-size:3rem;
    filter:drop-shadow(0 0 18px rgba(255,194,96,.55));
}

.candles-eyebrow{
    margin-bottom:12px;
    color:var(--secondary);
    font-size:.78rem;
    font-weight:bold;
    letter-spacing:.24em;
    text-transform:uppercase;
}

.candles-introduction h1,
.candles-header h1{
    margin:0;
    font-size:clamp(2.7rem, 7vw, 4.8rem);
    text-shadow:0 0 28px rgba(75,163,255,.28);
}

.candles-lead{
    margin:24px auto 32px;
    color:var(--text-muted);
    font-size:1.15rem;
    line-height:1.8;
}

.candles-light-button{
    min-height:50px;
    padding:14px 30px;
    border:1px solid rgba(139,233,255,.45);
    border-radius:999px;
    background:linear-gradient(135deg, #368fe8, #69c7f3);
    box-shadow:0 12px 35px rgba(44,150,229,.28);
    color:white;
    cursor:pointer;
    font:inherit;
    font-weight:bold;
    transition:transform .25s, filter .25s, box-shadow .25s;
}

.candles-light-button:hover,
.candles-light-button:focus-visible{
    transform:translateY(-2px);
    filter:brightness(1.08);
    box-shadow:0 15px 42px rgba(64,183,255,.38);
}

.candles-header{
    max-width:760px;
    margin:0 auto 58px;
    text-align:center;
}

.candles-header > p:last-child{
    margin:18px auto 0;
    color:var(--text-muted);
    font-size:1.05rem;
    line-height:1.7;
}

.candles-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
    align-items:end;
    gap:28px 20px;
}

.candle-offering{
    --remaining-ratio:1;
    position:relative;
    min-height:300px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    padding:28px 15px 20px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:22px;
    background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(5,21,38,.5));
}

.candle-offering--current{
    border-color:rgba(110,224,255,.48);
    background:radial-gradient(circle at 50% 38%, rgba(83,207,255,.15), transparent 55%), rgba(6,28,49,.64);
    box-shadow:0 0 35px rgba(58,192,255,.12), inset 0 0 30px rgba(109,220,255,.06);
}

.candle-offering--honorary{
    border-color:rgba(255,218,142,.22);
    box-shadow:inset 0 0 24px rgba(255,207,119,.035);
}

.candle-offering--extinguished{
    border-color:rgba(173,204,220,.14);
    background:linear-gradient(180deg, rgba(158,191,207,.025), rgba(4,16,28,.56));
}

.candle-visual{
    position:relative;
    width:100px;
    height:205px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
}

.candle-aura{
    position:absolute;
    bottom:calc(23px + 18px + (132px * var(--remaining-ratio)));
    width:88px;
    height:88px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,224,143,.38), rgba(255,156,56,.12) 42%, transparent 70%);
    filter:blur(6px);
    opacity:.9;
    animation:candle-glow 2.8s ease-in-out infinite alternate;
}

.candle-flame{
    position:absolute;
    z-index:4;
    bottom:calc(41px + 18px + (132px * var(--remaining-ratio)));
    width:22px;
    height:35px;
    transform-origin:50% 100%;
    animation:candle-flicker 2.4s ease-in-out infinite alternate;
}

.candle-flame span{
    position:absolute;
    display:block;
    transform:rotate(45deg);
}

.candle-flame-outer{
    inset:2px 1px 1px;
    border-radius:55% 45% 58% 42% / 70% 65% 35% 30%;
    background:linear-gradient(145deg, #ffe58f 5%, #ffad44 55%, #f06a2f 100%);
    box-shadow:0 0 11px rgba(255,190,86,.9), 0 0 25px rgba(255,139,43,.55);
}

.candle-flame-inner{
    inset:10px 6px 3px 7px;
    border-radius:54% 46% 58% 42%;
    background:linear-gradient(145deg, #fffbe2, #ffd66f 70%);
    filter:blur(.2px);
}

.candle-flame-core{
    inset:19px 9px 3px 10px;
    border-radius:60% 40% 55% 45%;
    background:#fffef2;
    box-shadow:0 0 4px #fffbe4;
}

.candle-wick{
    position:absolute;
    z-index:3;
    bottom:calc(30px + 18px + (132px * var(--remaining-ratio)));
    width:3px;
    height:15px;
    border-radius:60% 40% 30% 70%;
    background:linear-gradient(90deg, #111923, #3b302b 60%, #16191e);
    box-shadow:0 -1px 2px rgba(255,178,73,.45);
    transform:rotate(-3deg);
}

.candle-wax{
    position:absolute;
    bottom:28px;
    width:66px;
    height:calc(18px + (132px * var(--remaining-ratio)));
    min-height:18px;
    border-radius:10px 7px 6px 9px / 8px 10px 5px 7px;
    background:
        linear-gradient(95deg, rgba(92,163,198,.34), transparent 19%, rgba(255,255,255,.5) 47%, transparent 70%),
        linear-gradient(90deg, #b5d9e9, #eaf8fa 45%, #9ac5dc 100%);
    box-shadow:
        inset -9px 0 15px rgba(30,104,151,.2),
        inset 7px 0 11px rgba(255,255,255,.15),
        0 0 16px rgba(148,224,255,.16);
    transition:height .8s linear;
}

.candle-wax::after{
    position:absolute;
    inset:1px 5px auto;
    height:15px;
    border-radius:50%;
    background:linear-gradient(180deg, rgba(255,255,255,.46), transparent 75%);
    content:"";
    pointer-events:none;
}

.candle-wax-rim{
    position:absolute;
    top:-5px;
    left:1px;
    width:calc(100% - 2px);
    height:12px;
    border-radius:48% 52% 46% 54% / 62% 55% 45% 38%;
    background:linear-gradient(180deg, #f4fdff, #c2e2ed);
    box-shadow:inset 0 4px 4px rgba(46,111,147,.28), 0 -2px 4px rgba(255,255,255,.18);
    transform:rotate(-1deg);
}

.candle-melt-pool{
    position:absolute;
    z-index:2;
    top:-1px;
    left:20px;
    width:27px;
    height:7px;
    border-radius:50%;
    background:radial-gradient(ellipse, #7caec5 0 25%, #b9dae6 55%, rgba(238,250,252,.35) 72%);
    box-shadow:inset 0 1px 2px rgba(23,72,99,.34), 0 0 5px rgba(255,225,158,.22);
}

.candle-drip{
    position:absolute;
    z-index:3;
    top:3px;
    width:7px;
    border-radius:2px 2px 7px 7px;
    background:linear-gradient(90deg, #dff2f6, #b4d8e5);
    box-shadow:1px 1px 2px rgba(34,91,121,.12);
}

.candle-drip--one{
    left:7px;
    height:calc(5px + (16px * var(--remaining-ratio)));
}

.candle-drip--two{
    right:10px;
    height:calc(4px + (10px * var(--remaining-ratio)));
}

.candle-offering--extinguished .candle-aura,
.candle-offering--extinguished .candle-flame{
    display:none;
}

.candle-offering--extinguished .candle-wick{
    height:9px;
    background:#121820;
    box-shadow:none;
}

.candle-offering--extinguished .candle-wax{
    filter:saturate(.65) brightness(.78);
}

.candle-holder{
    position:absolute;
    bottom:19px;
    width:96px;
    height:13px;
    border:1px solid rgba(129,197,255,.4);
    border-radius:50%;
    background:linear-gradient(180deg, #4d83a3, #153c59);
    box-shadow:0 8px 14px rgba(0,0,0,.35);
}

.candle-name{
    max-width:100%;
    margin:12px 0 0;
    color:rgba(246,251,255,.86);
    font-size:.9rem;
    line-height:1.35;
    overflow-wrap:anywhere;
    text-align:center;
}

.candle-current-marker,
.candle-honorary-marker{
    margin-top:7px;
    color:var(--secondary);
    font-size:.7rem;
    font-weight:bold;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.candle-honorary-marker{
    color:rgba(255,221,154,.86);
    letter-spacing:.1em;
}

.candle-resting-state{
    margin-top:5px;
    color:rgba(198,218,228,.55);
    font-size:.68rem;
    font-style:italic;
}

.candle-countdown{
    width:min(520px, 100%);
    margin:42px auto 0;
    padding:20px 24px;
    border:1px solid rgba(109,220,255,.22);
    border-radius:18px;
    background:rgba(4,20,36,.65);
    text-align:center;
}

.candle-countdown p{
    margin:0 0 8px;
    color:var(--text-muted);
}

.candle-countdown strong{
    color:var(--secondary);
    font-family:"Cinzel", serif;
    font-size:clamp(1.35rem, 4vw, 2rem);
    font-variant-numeric:tabular-nums;
    letter-spacing:.05em;
}

@keyframes candle-flicker{
    0%{ transform:rotate(-2.5deg) skewX(-1deg) scale(.97, 1.025); }
    38%{ transform:rotate(1.5deg) skewX(1deg) scale(1.025, .99); }
    72%{ transform:rotate(-1deg) skewX(-.5deg) scale(.99, 1.035); }
    100%{ transform:rotate(2.5deg) skewX(1deg) scale(1.02, .975); }
}

@keyframes candle-glow{
    from{ opacity:.76; transform:scale(.96); }
    to{ opacity:.96; transform:scale(1.035); }
}

@keyframes candle-status-breathe{
    from{ opacity:.65; transform:translateY(1px); }
    to{ opacity:1; transform:translateY(-2px); }
}

@media (max-width:599px){
    .candles-page{
        padding-top:calc(105px + env(safe-area-inset-top));
        padding-right:max(12px, env(safe-area-inset-right));
        padding-bottom:calc(52px + env(safe-area-inset-bottom));
        padding-left:max(12px, env(safe-area-inset-left));
    }

    .candles-introduction{
        padding:46px 20px;
        border-radius:22px;
    }

    .candles-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:14px 10px;
    }

    .candle-offering{
        min-height:285px;
        padding-inline:8px;
    }

    .candles-header{
        margin-bottom:36px;
    }
}

@media (max-width:370px){
    .candles-grid{
        grid-template-columns:1fr;
    }
}