html, body {
    margin: 0;
    height: 100%;
    background: #0d0a07;
    overflow: hidden;
    font-family: Georgia, 'Times New Roman', serif;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

#stage {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#scene {
    width: 100%;
    height: 100%;
    max-width: 560px;
    display: block;
}

#fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    pointer-events: none;
}

#title {
    color: #d8b878;
    font-size: 13px;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .75;
    text-shadow: 0 1px 3px #000;
}

#mute {
    pointer-events: auto;
    background: rgba(255, 200, 120, .08);
    border: 1px solid rgba(255, 200, 120, .25);
    color: #d8b878;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
}
#mute:hover { background: rgba(255, 200, 120, .18); }

#hint {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
    color: #a8895c;
    font-size: 12.5px;
    font-style: italic;
    opacity: 0;
    text-shadow: 0 1px 3px #000;
    transition: opacity 1s;
    pointer-events: none;
}
#hint.show { opacity: .8; }
#hint.hide { opacity: 0; transition: opacity 1.5s; }

/* ---------- objects ---------- */
.obj { cursor: pointer; }
.obj:active { filter: brightness(1.12); }

/* diya flame */
#flame, #diyaGlow, #warmOverlay, #oilSurface { transition: opacity .8s ease; }
#stage.lit #flame { opacity: 1; }
#stage.lit #diyaGlow { opacity: 1; animation: glowPulse 3.2s ease-in-out infinite; }
#stage.lit #warmOverlay { opacity: 1; }
#stage.lit #oilSurface { fill: #6b4712; }

#flamePath {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}
#stage.lit #flamePath { animation: flick .62s ease-in-out infinite alternate; }

@keyframes flick {
    0%   { transform: scale(1, 1) skewX(0deg); }
    30%  { transform: scale(.94, 1.07) skewX(2.5deg); }
    55%  { transform: scale(1.05, .95) skewX(-2deg); }
    80%  { transform: scale(.97, 1.05) skewX(1.5deg); }
    100% { transform: scale(1.02, 1.02) skewX(-1deg); }
}
@keyframes glowPulse {
    0%, 100% { opacity: .85; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.06); }
}
#diyaGlow { transform-box: fill-box; transform-origin: center; }

/* incense ember */
#ember, #emberCore { transition: opacity .5s; }
#stage.incenseLit #ember { opacity: .95; animation: emberPulse 2.4s ease-in-out infinite; }
#stage.incenseLit #emberCore { opacity: 1; }
@keyframes emberPulse {
    0%, 100% { opacity: .7; }
    45%      { opacity: 1; }
    60%      { opacity: .85; }
}

/* toran sway */
#toran { transform-box: fill-box; transform-origin: 50% 0%; }
#toran.sway { animation: toranSway 2.6s cubic-bezier(.36, .07, .19, .97); }
@keyframes toranSway {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(2.6deg); }
    35%  { transform: rotate(-2deg); }
    55%  { transform: rotate(1.3deg); }
    75%  { transform: rotate(-.7deg); }
    100% { transform: rotate(0deg); }
}
.tassel { transform-box: fill-box; transform-origin: 50% 0%; }
#toran.sway .tassel { animation: tasselSwing 2.2s cubic-bezier(.36, .07, .19, .97); }
#toran.sway .tasselPos:nth-child(2) .tassel { animation-delay: .08s; }
#toran.sway .tasselPos:nth-child(3) .tassel { animation-delay: .16s; }
@keyframes tasselSwing {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(7deg); }
    45%  { transform: rotate(-5deg); }
    70%  { transform: rotate(2.6deg); }
    100% { transform: rotate(0deg); }
}

/* bell swing — applied by JS adding .ring */
#bellBody { transform-box: view-box; transform-origin: 92px 356px; }
#bellBody.ring { animation: bellSwing 2.8s cubic-bezier(.3, .6, .35, 1); }
@keyframes bellSwing {
    0%   { transform: rotate(0deg); }
    12%  { transform: rotate(11deg); }
    30%  { transform: rotate(-9deg); }
    48%  { transform: rotate(6.5deg); }
    64%  { transform: rotate(-4deg); }
    80%  { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}
#clapper { transform-box: view-box; transform-origin: 92px 404px; }
#bellBody.ring #clapper { animation: clapperSwing 2.8s cubic-bezier(.3, .6, .35, 1); }
@keyframes clapperSwing {
    0%   { transform: rotate(0deg); }
    12%  { transform: rotate(-16deg); }
    30%  { transform: rotate(14deg); }
    48%  { transform: rotate(-10deg); }
    64%  { transform: rotate(6deg); }
    80%  { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}

/* flower bloom */
.petal {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transform: rotate(var(--closed)) scale(.82);
    transition: transform 1.1s cubic-bezier(.34, 1.4, .5, 1);
}
#bloom.bloomed .petal { transform: rotate(var(--open)) scale(1.12); }

/* water ripples */
.ripple {
    transform-box: fill-box;
    transform-origin: center;
    animation: rippleGrow 1.6s ease-out forwards;
}
@keyframes rippleGrow {
    0%   { transform: scale(.15); opacity: .85; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* gentle idle life */
#petalsFront, #petalsBack {
    animation: breathe 5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
#petalsBack { animation-delay: -2.5s; }
@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}