/*
 * Layout stabilization for HTMX-swapped elements.
 * The Tailwind CDN (play script) generates styles asynchronously after DOM
 * mutation. When HTMX swaps in new content, there is a single-frame flash
 * where Tailwind classes haven't been processed yet, causing elements to
 * render at default (left-aligned, unstyled) positions before snapping into
 * place. These rules provide immediate layout for swapped containers so
 * positioning is correct on the first paint.
 */
#progress {
    text-align: center;
    margin-bottom: 2rem;
}

#wheel,
#devotion {
    background: rgb(17, 24, 39);
    border: 1px solid rgb(31, 41, 55);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

#activity {
    margin-top: 2rem;
}

.font-cinzel {
    font-family: 'Cinzel', serif;
}

/* === Hero Background === */

.hero-bg {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(3, 7, 18, 0.5) 0%,
        rgba(3, 7, 18, 0.88) 100%
    );
    z-index: 0;
}

.hero-bg > * {
    position: relative;
    z-index: 1;
}

.hero-text-shadow {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(168, 85, 247, 0.3); }
    50% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.6); }
}

@keyframes spin-wheel {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes xp-tick {
    0% { transform: scale(1); color: inherit; }
    50% { transform: scale(1.2); color: #fbbf24; }
    100% { transform: scale(1); color: inherit; }
}

@keyframes title-glow {
    0% { text-shadow: 0 0 5px rgba(251, 191, 36, 0); }
    50% { text-shadow: 0 0 20px rgba(251, 191, 36, 0.8); }
    100% { text-shadow: 0 0 5px rgba(251, 191, 36, 0); }
}

.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-spin-wheel { animation: spin-wheel 0.5s ease-out; }
.animate-xp-tick { animation: xp-tick 0.4s ease-out; }
.animate-title-glow { animation: title-glow 1.5s ease-in-out; }

.htmx-settling .animate-on-settle {
    animation: xp-tick 0.4s ease-out;
}

/* === XP Bar Heat System === */

/* Base bar fill — default purple */
.xp-bar-fill {
    background: rgb(147, 51, 234);
    position: relative;
}

/* --- Warm (50-64%) --- */
#progress[data-heat="warm"] .xp-bar-fill {
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.25), 0 0 12px rgba(251, 191, 36, 0.1);
}

/* --- Hot (65-79%) --- */
#progress[data-heat="hot"] .xp-bar-fill {
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.4), 0 0 16px rgba(251, 191, 36, 0.2);
    animation: bar-pulse-hot 2s ease-in-out infinite;
}

@keyframes bar-pulse-hot {
    0%, 100% { box-shadow: 0 0 8px rgba(251, 191, 36, 0.4), 0 0 16px rgba(251, 191, 36, 0.2); }
    50% { box-shadow: 0 0 12px rgba(251, 191, 36, 0.6), 0 0 20px rgba(251, 191, 36, 0.3); }
}

/* --- Volatile (80-89%) --- */
#progress[data-heat="volatile"] .xp-bar-fill {
    background: linear-gradient(90deg, rgb(147, 51, 234), rgb(217, 119, 6));
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5), 0 0 20px rgba(251, 191, 36, 0.3);
    animation: bar-pulse-volatile 1.5s ease-in-out infinite;
}

#progress[data-heat="volatile"] #xp-count {
    animation: text-shimmer 2s ease-in-out infinite;
}

@keyframes bar-pulse-volatile {
    0%, 100% { box-shadow: 0 0 10px rgba(251, 191, 36, 0.5), 0 0 20px rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 0 16px rgba(251, 191, 36, 0.7), 0 0 28px rgba(251, 191, 36, 0.4); }
}

@keyframes text-shimmer {
    0%, 100% { opacity: 1; text-shadow: none; }
    50% { opacity: 0.85; text-shadow: 0 0 6px rgba(251, 191, 36, 0.5); }
}

/* --- Fever (90-99%) --- */
#progress[data-heat="fever"] .xp-bar-fill {
    background: linear-gradient(90deg, rgb(217, 119, 6), rgb(251, 191, 36));
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.7), 0 0 30px rgba(251, 191, 36, 0.4), 0 0 50px rgba(251, 191, 36, 0.2);
    animation: bar-pulse-fever 1s ease-in-out infinite;
}

#progress[data-heat="fever"] #xp-count {
    animation: text-shimmer 1.2s ease-in-out infinite;
}

#progress[data-heat="fever"] {
    animation: section-vibrate 0.15s linear infinite;
}

@keyframes bar-pulse-fever {
    0%, 100% { box-shadow: 0 0 14px rgba(251, 191, 36, 0.7), 0 0 30px rgba(251, 191, 36, 0.4), 0 0 50px rgba(251, 191, 36, 0.2); }
    50% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.9), 0 0 40px rgba(251, 191, 36, 0.6), 0 0 60px rgba(251, 191, 36, 0.3); }
}

@keyframes section-vibrate {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 0.5px); }
    50% { transform: translate(1px, -0.5px); }
    75% { transform: translate(-0.5px, -0.5px); }
    100% { transform: translate(0, 0); }
}

/* --- Ember runes --- */
.xp-ember {
    position: absolute;
    bottom: 100%;
    width: 14px;
    height: 14px;
    pointer-events: none;
    filter: brightness(0) saturate(100%) invert(75%) sepia(60%) saturate(600%) hue-rotate(5deg) brightness(1.1) drop-shadow(0 0 3px rgba(251, 191, 36, 0.6));
    animation: ember-rise 3s ease-out forwards;
}

@keyframes ember-rise {
    0% {
        opacity: var(--ember-opacity, 0.3);
        transform: translateY(0) translateX(0) scale(0.6);
    }
    50% {
        opacity: var(--ember-opacity, 0.3);
        transform: translateY(calc(var(--ember-drift, -50px) * 0.5)) translateX(var(--ember-wobble, 8px)) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translateY(var(--ember-drift, -50px)) translateX(calc(var(--ember-wobble, 8px) * -1)) scale(0.5);
    }
}

/* Fever-tier embers get a glow trail */
#progress[data-heat="fever"] .xp-ember {
    filter: brightness(0) saturate(100%) invert(75%) sepia(60%) saturate(600%) hue-rotate(5deg) brightness(1.3) drop-shadow(0 0 6px rgba(251, 191, 36, 0.9));
}

/* --- Rank-up explosion --- */
.rankup-flash-overlay {
    position: fixed;
    inset: 0;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    animation: screen-flash 0.4s ease-out forwards;
}

@keyframes screen-flash {
    0% { opacity: 0; }
    15% { opacity: 0.15; }
    100% { opacity: 0; }
}

.xp-bar-explode {
    animation: bar-explode 0.8s ease-out forwards !important;
}

@keyframes bar-explode {
    0% {
        box-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
    }
    20% {
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.9), 0 0 60px rgba(251, 191, 36, 0.8);
    }
    50% {
        box-shadow: 0 0 40px rgba(251, 191, 36, 0.9), 0 0 60px rgba(0, 255, 255, 0.6), 0 0 80px rgba(168, 85, 247, 0.5);
    }
    100% {
        box-shadow: 0 0 0px rgba(251, 191, 36, 0);
    }
}

.xp-ember-burst {
    animation: ember-burst 0.6s ease-out forwards !important;
}

@keyframes ember-burst {
    0% {
        opacity: 1;
        transform: translateY(var(--ember-drift, -20px)) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translateY(var(--burst-y, -80px)) translateX(var(--burst-x, 40px)) scale(1.5);
    }
}

/* Silence phase — dim the bar */
.xp-bar-dim {
    opacity: 0.3;
    transition: opacity 0.5s ease-out;
}

/* Title fade out */
.title-fade-out {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Title reveal */
.title-reveal {
    animation: title-materialize 1.5s ease-out forwards;
}

@keyframes title-materialize {
    0% {
        opacity: 0;
        text-shadow: 0 0 30px rgba(251, 191, 36, 1), 0 0 60px rgba(251, 191, 36, 0.6);
    }
    40% {
        opacity: 1;
        text-shadow: 0 0 25px rgba(251, 191, 36, 0.9), 0 0 50px rgba(251, 191, 36, 0.5);
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 5px rgba(251, 191, 36, 0.2);
    }
}

/* Consecration runes — multiple, spread out, glittering cyan-gold */
.xp-consecration-rune {
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 28px;
    height: 28px;
    margin-left: -14px;
    pointer-events: none;
    animation: consecration-rise 2s ease-out forwards, consecration-glitter 0.4s ease-in-out infinite alternate;
}

@keyframes consecration-rise {
    0% {
        opacity: 0.9;
        transform: translateY(0) translateX(var(--cons-offset-x, 0px)) scale(0.6);
        filter: brightness(0) saturate(100%) invert(75%) sepia(60%) saturate(600%) hue-rotate(5deg) brightness(1.3)
            drop-shadow(0 0 8px rgba(251, 191, 36, 0.9)) drop-shadow(0 0 4px rgba(0, 255, 255, 0.6));
    }
    30% {
        opacity: 1;
        transform: translateY(calc(var(--cons-drift-y, -70px) * 0.3)) translateX(var(--cons-offset-x, 0px)) scale(1);
    }
    60% {
        opacity: 0.7;
        transform: translateY(calc(var(--cons-drift-y, -70px) * 0.7)) translateX(var(--cons-offset-x, 0px)) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translateY(var(--cons-drift-y, -70px)) translateX(var(--cons-offset-x, 0px)) scale(0.5);
        filter: brightness(0) saturate(100%) invert(85%) sepia(80%) saturate(800%) hue-rotate(150deg) brightness(1.5)
            drop-shadow(0 0 12px rgba(0, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
    }
}

@keyframes consecration-glitter {
    0% {
        filter: brightness(0) saturate(100%) invert(75%) sepia(60%) saturate(600%) hue-rotate(5deg) brightness(1.3)
            drop-shadow(0 0 8px rgba(251, 191, 36, 0.9)) drop-shadow(0 0 4px rgba(0, 255, 255, 0.4));
    }
    100% {
        filter: brightness(0) saturate(100%) invert(85%) sepia(80%) saturate(800%) hue-rotate(150deg) brightness(1.5)
            drop-shadow(0 0 10px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
    }
}

/* === Prayer Wheel === */

.prayer-wheel {
    position: relative;
    width: clamp(200px, 25vw, 300px);
    height: clamp(200px, 25vw, 300px);
    margin: 0 auto;
}

.wheel-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 255, 0.15);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: border-color 0.3s;
}

.wheel-ring-outer {
    width: 100%;
    height: 100%;
}

.wheel-ring-middle {
    width: 66%;
    height: 66%;
}

.wheel-ring-inner {
    width: 40%;
    height: 40%;
}

.wheel-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.4em;
    height: 1.4em;
    margin-top: -0.7em;
    margin-left: -0.7em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    line-height: 1;
    transform-origin: 0.7em 0.7em;
}

.wheel-symbol img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Outer ring: purple ~rgba(168, 85, 247, 0.6) + glow */
.wheel-ring-outer .wheel-symbol img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(90%) saturate(1500%) hue-rotate(240deg) brightness(1.1) drop-shadow(0 0 4px rgba(168, 85, 247, 0.6));
    opacity: 0.6;
    transition: filter 2s ease-in, opacity 2s ease-in;
}

/* Middle ring: lighter purple ~rgba(192, 132, 252, 0.8) + glow */
.wheel-ring-middle .wheel-symbol img {
    filter: brightness(0) saturate(100%) invert(60%) sepia(80%) saturate(1000%) hue-rotate(230deg) brightness(1.2) drop-shadow(0 0 4px rgba(192, 132, 252, 0.8));
    opacity: 0.8;
    transition: filter 2s ease-in, opacity 2s ease-in;
}

/* Inner ring: gold ~rgba(251, 191, 36, 0.7) + glow */
.wheel-ring-inner .wheel-symbol img {
    filter: brightness(0) saturate(100%) invert(75%) sepia(60%) saturate(600%) hue-rotate(5deg) brightness(1.1) drop-shadow(0 0 4px rgba(251, 191, 36, 0.7));
    opacity: 0.7;
    transition: filter 2s ease-in, opacity 2s ease-in;
}

.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 20%;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 255, 0.2);
    background: rgba(88, 28, 135, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.4em;
    color: #c084fc;
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
    animation: pulse-glow 2s ease-in-out infinite;
    transition: box-shadow 0.3s, text-shadow 0.3s, border-color 0.3s;
    z-index: 10;
}

.wheel-center:hover {
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
    border-color: rgba(0, 255, 255, 0.5);
}

.wheel-center .wheel-result {
    font-family: 'Cinzel', serif;
    font-size: 0.6em;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
}

.wheel-sigil img {
    width: 1.4em;
    height: 1.4em;
    filter: brightness(0) saturate(100%) invert(60%) sepia(80%) saturate(1000%) hue-rotate(230deg) brightness(1.3) drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
}

/* Hover brightens rings */
.prayer-wheel:hover .wheel-ring {
    border-color: rgba(0, 255, 255, 0.3);
}

/* Spinning state */
.wheel-ring-outer.spinning {
    animation: spin-cw 4s linear infinite;
    border-color: rgba(0, 255, 255, 0.6);
}

.wheel-ring-middle.spinning {
    animation: spin-ccw 2.5s linear infinite;
    border-color: rgba(255, 0, 255, 0.5);
}

.wheel-ring-inner.spinning {
    animation: spin-cw 1.5s linear infinite;
    border-color: rgba(0, 255, 255, 0.8);
}

.wheel-center.spinning {
    animation: none;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.6);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
    color: #0ff;
    border-color: rgba(0, 255, 255, 0.6);
}

.wheel-center.spinning .wheel-sigil img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1000%) hue-rotate(150deg) brightness(1.5) drop-shadow(0 0 15px rgba(0, 255, 255, 0.8));
}

/* Deceleration animations */
.wheel-ring-outer.decelerating {
    animation: decel-cw 1.5s ease-out forwards;
    border-color: rgba(0, 255, 255, 0.3);
}

.wheel-ring-middle.decelerating {
    animation: decel-ccw 1.5s ease-out forwards;
    border-color: rgba(255, 0, 255, 0.25);
}

.wheel-ring-inner.decelerating {
    animation: decel-cw 1.5s ease-out forwards;
    border-color: rgba(0, 255, 255, 0.4);
}

/* Reset fade-out/fade-in */
.wheel-ring.resetting,
.wheel-center.resetting {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.wheel-ring.returning,
.wheel-center.returning {
    opacity: 1;
    transition: opacity 0.5s ease-in;
}

/* Recharge state: runes dim, sigil pulses */
@keyframes sigil-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.wheel-ring-outer.recharging .wheel-symbol img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(40%) saturate(600%) hue-rotate(240deg) brightness(0.7) drop-shadow(0 0 2px rgba(168, 85, 247, 0.3));
    opacity: 0.3;
}

.wheel-ring-middle.recharging .wheel-symbol img {
    filter: brightness(0) saturate(100%) invert(30%) sepia(40%) saturate(400%) hue-rotate(230deg) brightness(0.8) drop-shadow(0 0 2px rgba(192, 132, 252, 0.3));
    opacity: 0.4;
}

.wheel-ring-inner.recharging .wheel-symbol img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(30%) saturate(300%) hue-rotate(5deg) brightness(0.7) drop-shadow(0 0 2px rgba(251, 191, 36, 0.3));
    opacity: 0.35;
}

.wheel-center.recharging {
    animation: sigil-pulse 1.5s ease-in-out infinite;
    cursor: not-allowed;
}

.wheel-center.recharging .wheel-sigil img {
    filter: brightness(0) saturate(100%) invert(30%) sepia(40%) saturate(500%) hue-rotate(230deg) brightness(0.9) drop-shadow(0 0 4px rgba(168, 85, 247, 0.3));
}

/* Charged state: brief flare when recharge completes */
.wheel-ring-outer.charged .wheel-symbol img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(90%) saturate(1500%) hue-rotate(240deg) brightness(1.5) drop-shadow(0 0 10px rgba(168, 85, 247, 0.9));
    opacity: 0.85;
    transition: filter 0.4s ease-out, opacity 0.4s ease-out;
}

.wheel-ring-middle.charged .wheel-symbol img {
    filter: brightness(0) saturate(100%) invert(60%) sepia(80%) saturate(1000%) hue-rotate(230deg) brightness(1.6) drop-shadow(0 0 10px rgba(192, 132, 252, 1));
    opacity: 1;
    transition: filter 0.4s ease-out, opacity 0.4s ease-out;
}

.wheel-ring-inner.charged .wheel-symbol img {
    filter: brightness(0) saturate(100%) invert(75%) sepia(60%) saturate(600%) hue-rotate(5deg) brightness(1.5) drop-shadow(0 0 10px rgba(251, 191, 36, 0.9));
    opacity: 0.95;
    transition: filter 0.4s ease-out, opacity 0.4s ease-out;
}

.wheel-center.charged {
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.7);
}

.wheel-center.charged .wheel-sigil img {
    filter: brightness(0) saturate(100%) invert(60%) sepia(80%) saturate(1000%) hue-rotate(230deg) brightness(1.7) drop-shadow(0 0 15px rgba(168, 85, 247, 0.9));
    transition: filter 0.4s ease-out;
}

/* Stutter animation for rate limit */
.wheel-ring.stutter {
    animation: stutter 0.4s ease-out;
}

@keyframes spin-cw {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spin-ccw {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes decel-cw {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(120deg); }
}

@keyframes decel-ccw {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(-90deg); }
}

@keyframes stutter {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    25% { transform: translate(-50%, -50%) rotate(10deg); }
    50% { transform: translate(-50%, -50%) rotate(-8deg); }
    75% { transform: translate(-50%, -50%) rotate(4deg); }
    100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/* === Altar === */
#altar {
    position: relative;
    min-height: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}

.altar-text {
    transition: opacity 0.3s ease-in-out;
    letter-spacing: 0.05em;
}

.altar-text.fade-out {
    opacity: 0;
}

/* Blur-morph transition: ack → thinking */
.altar-text.blur-morph-out {
    filter: blur(8px);
    opacity: 0.3;
    transition: filter 300ms ease-in, opacity 300ms ease-in;
}

.altar-text.blur-morph-in {
    filter: blur(8px);
    opacity: 0.3;
}

.altar-text.blur-morph-resolve {
    filter: blur(0px);
    opacity: 1;
    transition: filter 300ms ease-out, opacity 300ms ease-out;
}

/* Glitch jitter */
.altar-text.glitch-active {
    animation: altar-glitch-jitter 0.1s steps(2) infinite;
}

@keyframes altar-glitch-jitter {
    0% { transform: translate(0, 0) skewX(0deg); }
    25% { transform: translate(-2px, 1px) skewX(-2deg); }
    50% { transform: translate(1px, -1px) skewX(1deg); }
    75% { transform: translate(2px, 0px) skewX(2deg); }
    100% { transform: translate(0, 0) skewX(0deg); }
}

/* Dissolve character spans */
.altar-char {
    display: inline-block;
    transition: opacity 0.15s ease-in-out;
}

.altar-char.char-hidden {
    opacity: 0;
}

/* Signal snow overlay */
.altar-snow-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

.altar-snow-canvas.snow-visible {
    opacity: 1;
}

.altar-snow-canvas.snow-fading {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

/* Typing phase glow escalation */
#altar[data-phase="typing:early"] .altar-text {
    color: rgba(168, 85, 247, 0.6);
    animation: altar-pulse-faint 3s ease-in-out infinite;
}

#altar[data-phase="typing:sustained"] .altar-text {
    color: rgba(192, 132, 252, 0.8);
    text-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
}

#altar[data-phase="typing:prolonged"] .altar-text {
    color: rgba(251, 191, 36, 0.8);
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
    animation: altar-shimmer 2s ease-in-out infinite;
}

#altar[data-phase="result:positive"] .altar-text {
    color: rgba(251, 191, 36, 0.9);
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

#altar[data-phase="result:neutral"] .altar-text {
    color: rgba(156, 163, 175, 0.8);
}

#altar[data-phase="result:negative"] .altar-text {
    color: rgba(248, 113, 113, 0.8);
    text-shadow: 0 0 6px rgba(248, 113, 113, 0.3);
}

#altar[data-phase="silence"] .altar-text {
    opacity: 0;
}

@keyframes altar-pulse-faint {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes altar-shimmer {
    0%, 100% { opacity: 0.8; text-shadow: 0 0 12px rgba(251, 191, 36, 0.3); }
    50% { opacity: 1; text-shadow: 0 0 20px rgba(251, 191, 36, 0.5); }
}

/* Keep old keyframe name as alias for backwards compat if anything references it */
@keyframes altar-thinking-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Peak flash reveal before result */
.altar-text.altar-flash-reveal {
    position: relative;
}

.altar-flash-reveal::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    width: 200%;
    height: 200%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(251, 191, 36, 0.6) 30%, transparent 70%);
    animation: flash-burst 500ms ease-out forwards;
    pointer-events: none;
    z-index: 5;
}

@keyframes flash-burst {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 1;
    }
    40% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Result text emerges from flash */
.altar-result-emerge {
    animation: result-emerge 300ms ease-out forwards;
}

@keyframes result-emerge {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* === Devotion Textarea Tracing Border === */

@property --devotion-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.devotion-glow-wrap {
    position: relative;
    border-radius: 0.25rem;
    padding: 1px;
}

.devotion-glow-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.25rem;
    padding: 1px;
    background: conic-gradient(
        from var(--devotion-angle),
        transparent 0%,
        transparent 70%,
        rgba(168, 85, 247, 0.2) 85%,
        rgba(168, 85, 247, 0.5) 95%,
        transparent 100%
    );
    animation: devotion-trace 4s linear infinite;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
}

#devotion-body {
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
}

#devotion-body:focus {
    border-color: rgb(168, 85, 247);
}

@keyframes devotion-trace {
    from { --devotion-angle: 0deg; }
    to { --devotion-angle: 360deg; }
}

/* === Devotion Sealed State === */
#devotion #devotion-body {
    transition: height 400ms ease, opacity 500ms ease, background 400ms ease, filter 500ms ease;
    overflow: hidden;
}

#devotion.devotion-sealed #devotion-body {
    opacity: 0.4;
    background: rgba(10, 10, 20, 0.9) !important;
    pointer-events: none;
    filter: blur(2px);
}

#devotion.devotion-sealed #devotion-body.seal-blur-clear {
    filter: blur(0px);
}

#devotion .devotion-glow-wrap::before {
    transition: opacity 600ms ease;
}

#devotion.devotion-sealed .devotion-glow-wrap::before {
    opacity: 0;
    animation-play-state: paused;
}

#devotion #devotion-submit {
    transition: opacity 400ms ease, filter 400ms ease;
}

#devotion.devotion-sealed #devotion-submit {
    opacity: 0.3;
    pointer-events: none;
    filter: saturate(0.3);
}

#devotion #devotion-preset {
    transition: opacity 400ms ease;
}

#devotion.devotion-sealed #devotion-preset {
    opacity: 0.3;
    pointer-events: none;
}

@keyframes sealed-breathe {
    0%, 100% { text-shadow: 0 0 4px rgba(168, 85, 247, 0.2); }
    50%      { text-shadow: 0 0 12px rgba(168, 85, 247, 0.5), 0 0 24px rgba(168, 85, 247, 0.15); }
}

#devotion.devotion-sealed #devotion-body::placeholder {
    color: rgba(168, 85, 247, 0.7);
    font-style: italic;
    animation: sealed-breathe 3s ease-in-out infinite;
}

/* === Devotion Recharging State === */

/* Dim snap (initial recharging state) */
#devotion.devotion-recharging #devotion-body {
    opacity: 0.25;
    background: rgba(10, 10, 20, 0.8);
    pointer-events: none;
    transition: none;
}

#devotion.devotion-recharging #devotion-submit {
    opacity: 0.15;
    pointer-events: none;
    transition: none;
}

#devotion.devotion-recharging #devotion-preset {
    opacity: 0.15;
    pointer-events: none;
    transition: none;
}

/* Ramp state (smooth transition from dim to full) */
#devotion.devotion-recharging-ramp #devotion-body {
    opacity: 1;
    background: rgb(31, 41, 55);
    transition: opacity var(--recharge-duration, 5s) ease-in,
                background var(--recharge-duration, 5s) ease-in;
}

#devotion.devotion-recharging-ramp #devotion-submit {
    opacity: 1;
    transition: opacity var(--recharge-duration, 5s) ease-in;
}

#devotion.devotion-recharging-ramp #devotion-preset {
    opacity: 1;
    transition: opacity var(--recharge-duration, 5s) ease-in;
}

/* Border glow recharge */
.devotion-glow-wrap.recharge-border::before {
    opacity: 0.1;
    animation: devotion-trace 4s linear infinite;
    transition: opacity var(--recharge-duration, 5s) ease-in;
}

#devotion.devotion-recharging-ramp .devotion-glow-wrap.recharge-border::before {
    opacity: 1;
}

/* Charged flare (400ms) */
#devotion.devotion-charged {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
    transition: box-shadow 0.4s ease-out;
}

.devotion-glow-wrap.charged-border::before {
    opacity: 1;
    animation: devotion-trace 2s linear infinite;
}

/* === Wheel dimming during typing === */
#wheel {
    transition: opacity 0.6s ease, filter 0.6s ease;
}

#wheel.wheel-dimmed {
    opacity: 0.3;
    filter: brightness(0.5);
}

/* === Altar Rune Flicker === */
#rune-layer {
    position: relative;
    overflow: hidden;
}

.altar-rune {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: rune-flicker var(--rune-duration, 2s) ease-out forwards;
}

@keyframes rune-flicker {
    0% {
        opacity: 1;
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1000%) hue-rotate(150deg) brightness(1.5)
            drop-shadow(0 0 6px rgba(0, 255, 255, 0.9));
    }
    15% {
        opacity: 0.9;
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1000%) hue-rotate(150deg) brightness(1.3)
            drop-shadow(0 0 4px rgba(0, 255, 255, 0.7));
    }
    100% {
        opacity: 0;
        filter: brightness(0) saturate(100%) invert(80%) sepia(40%) saturate(400%) hue-rotate(180deg) brightness(0.8)
            drop-shadow(0 0 0px rgba(147, 197, 253, 0));
    }
}

/* === Devotion Rune Burst === */
.devotion-rune {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    color: rgba(192, 132, 252, 0.9);
    font-family: serif;
    line-height: 1;
    will-change: transform, opacity;
}

@keyframes rune-shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Smooth glow fadedown after burst absorption */
#altar-text.burst-glow-fade {
    transition: text-shadow 1.5s ease-out, transform 0.3s ease-out;
}

/* === Favor Icon — Prismatic Drift === */
.favor-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%)
            saturate(600%) hue-rotate(0deg) brightness(1.2)
            drop-shadow(0 0 4px rgba(255, 200, 50, 1.0))
            drop-shadow(0 0 20px rgba(255, 200, 50, 0.7))
            drop-shadow(0 0 40px rgba(255, 200, 50, 0.3));
    animation: favor-drift 5s linear infinite;
}

.inline-favor {
    height: 1.4em;
    width: auto;
    vertical-align: middle;
    display: inline;
    margin-left: 0.2em;
}

.favor-muted {
    opacity: 0.45;
    height: 1.15em;
}

.favor-compact {
    height: 1em;
}

@keyframes favor-drift {
    0% {
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%)
                saturate(600%) hue-rotate(0deg) brightness(1.2)
                drop-shadow(0 0 4px rgba(255, 200, 50, 1.0))
                drop-shadow(0 0 20px rgba(255, 200, 50, 0.7))
                drop-shadow(0 0 40px rgba(255, 200, 50, 0.3));
    }
    25% {
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%)
                saturate(600%) hue-rotate(90deg) brightness(1.5)
                drop-shadow(0 0 6px rgba(255, 200, 50, 1.0))
                drop-shadow(0 0 28px rgba(255, 200, 50, 0.85))
                drop-shadow(0 0 50px rgba(255, 200, 50, 0.5));
    }
    50% {
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%)
                saturate(600%) hue-rotate(180deg) brightness(1.2)
                drop-shadow(0 0 4px rgba(255, 200, 50, 1.0))
                drop-shadow(0 0 20px rgba(255, 200, 50, 0.7))
                drop-shadow(0 0 40px rgba(255, 200, 50, 0.3));
    }
    75% {
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%)
                saturate(600%) hue-rotate(270deg) brightness(1.5)
                drop-shadow(0 0 6px rgba(255, 200, 50, 1.0))
                drop-shadow(0 0 28px rgba(255, 200, 50, 0.85))
                drop-shadow(0 0 50px rgba(255, 200, 50, 0.5));
    }
    100% {
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%)
                saturate(600%) hue-rotate(360deg) brightness(1.2)
                drop-shadow(0 0 4px rgba(255, 200, 50, 1.0))
                drop-shadow(0 0 20px rgba(255, 200, 50, 0.7))
                drop-shadow(0 0 40px rgba(255, 200, 50, 0.3));
    }
}

/* ============================================================
   Rune Spinner — Centerpiece loading indicator
   ============================================================ */

.rune-spinner {
    position: relative;
    width: 112px;
    height: 112px;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Custom properties driven by JS during escalation */
    --spin-speed: 0s;
    --flame-intensity: 0;
    --flame-height: 0px;
}

.rune-spinner__svg {
    width: 80px;
    height: 80px;
    color: rgba(192, 192, 192, 0.4);
    transition: color 0.6s ease, filter 0.6s ease;
    filter:
        drop-shadow(0 0 4px rgba(0, 229, 255, 0))
        drop-shadow(0 0 8px rgba(192, 192, 192, 0));
    animation: rune-idle-pulse 3s ease-in-out infinite;
}

@keyframes rune-idle-pulse {
    0%, 100% {
        color: rgba(192, 192, 192, 0.3);
        filter:
            drop-shadow(0 0 4px rgba(0, 229, 255, 0.05))
            drop-shadow(0 0 8px rgba(192, 192, 192, 0.05));
    }
    50% {
        color: rgba(192, 192, 192, 0.5);
        filter:
            drop-shadow(0 0 6px rgba(0, 229, 255, 0.2))
            drop-shadow(0 0 12px rgba(192, 192, 192, 0.15));
    }
}

/* --- Active state: spinning + flames --- */

.rune-spinner.rune-active .rune-spinner__svg {
    animation: rune-spin var(--spin-speed, 8s) linear infinite;
    color: rgba(0, 229, 255, 0.8);
    filter:
        drop-shadow(0 0 8px rgba(0, 229, 255, 0.6))
        drop-shadow(0 0 16px rgba(192, 192, 192, 0.4));
}

@keyframes rune-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Flame core — pseudo-elements on the wrapper */
.rune-spinner.rune-active::before,
.rune-spinner.rune-active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 24px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: var(--flame-intensity, 0);
    transition: opacity 0.4s ease, height 0.4s ease;
}

.rune-spinner.rune-active::before {
    height: var(--flame-height, 30px);
    transform: translateX(-50%) translateX(-12px);
    background: linear-gradient(
        to top,
        rgba(0, 229, 255, 0.9),
        rgba(0, 229, 255, 0.4) 40%,
        rgba(192, 192, 192, 0.2) 70%,
        transparent
    );
    filter: blur(8px);
    animation: flame-flicker-1 0.8s ease-in-out infinite alternate;
}

.rune-spinner.rune-active::after {
    height: calc(var(--flame-height, 30px) * 0.85);
    transform: translateX(-50%) translateX(12px);
    background: linear-gradient(
        to top,
        rgba(192, 192, 192, 0.9),
        rgba(0, 229, 255, 0.5) 50%,
        rgba(192, 192, 192, 0.1) 80%,
        transparent
    );
    filter: blur(10px);
    animation: flame-flicker-2 1.1s ease-in-out infinite alternate;
}

@keyframes flame-flicker-1 {
    0% {
        transform: translateX(-50%) translateX(-12px) scaleX(1) scaleY(1);
        opacity: var(--flame-intensity, 0);
    }
    25% {
        transform: translateX(-50%) translateX(-10px) scaleX(1.3) scaleY(1.05);
    }
    50% {
        transform: translateX(-50%) translateX(-14px) scaleX(0.8) scaleY(1.1);
        opacity: calc(var(--flame-intensity, 0) * 0.8);
    }
    75% {
        transform: translateX(-50%) translateX(-11px) scaleX(1.1) scaleY(0.95);
    }
    100% {
        transform: translateX(-50%) translateX(-13px) scaleX(0.9) scaleY(1.08);
        opacity: var(--flame-intensity, 0);
    }
}

@keyframes flame-flicker-2 {
    0% {
        transform: translateX(-50%) translateX(12px) scaleX(1) scaleY(1);
        opacity: var(--flame-intensity, 0);
    }
    33% {
        transform: translateX(-50%) translateX(14px) scaleX(1.2) scaleY(1.08);
    }
    66% {
        transform: translateX(-50%) translateX(10px) scaleX(0.85) scaleY(1.12);
        opacity: calc(var(--flame-intensity, 0) * 0.85);
    }
    100% {
        transform: translateX(-50%) translateX(13px) scaleX(1.05) scaleY(0.97);
        opacity: var(--flame-intensity, 0);
    }
}

/* Ambient heat ring via box-shadow — intensifies with --flame-intensity */
.rune-spinner.rune-active {
    box-shadow:
        0 0 20px rgba(0, 229, 255, calc(var(--flame-intensity, 0) * 0.3)),
        0 0 40px rgba(0, 229, 255, calc(var(--flame-intensity, 0) * 0.15)),
        0 0 60px rgba(192, 192, 192, calc(var(--flame-intensity, 0) * 0.1));
    border-radius: 50%;
    transition: box-shadow 0.4s ease;
}

/* --- Judgment flare: bright burst on result reveal --- */

.rune-spinner.rune-judgment .rune-spinner__svg {
    color: rgba(0, 229, 255, 1);
    filter:
        drop-shadow(0 0 12px rgba(0, 229, 255, 1))
        drop-shadow(0 0 30px rgba(192, 192, 192, 0.8))
        drop-shadow(0 0 50px rgba(0, 229, 255, 0.5));
    transform: scale(1.15);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.4s ease,
                color 0.2s ease;
}

.rune-spinner.rune-judgment {
    --flame-intensity: 1;
    --flame-height: 70px;
    border-radius: 50%;
    box-shadow:
        0 0 30px rgba(0, 229, 255, 0.6),
        0 0 60px rgba(0, 229, 255, 0.3),
        0 0 90px rgba(192, 192, 192, 0.2);
}

/* Settle back to idle after judgment */
.rune-spinner.rune-settling .rune-spinner__svg {
    animation: rune-idle-pulse 3s ease-in-out infinite;
    color: rgba(192, 192, 192, 0.4);
    filter:
        drop-shadow(0 0 4px rgba(0, 229, 255, 0))
        drop-shadow(0 0 8px rgba(192, 192, 192, 0));
    transform: scale(1);
    transition: transform 0.6s ease-out,
                filter 0.6s ease-out,
                color 0.6s ease-out;
}

.rune-spinner.rune-settling {
    --flame-intensity: 0;
    --flame-height: 0px;
    border-radius: 50%;
    box-shadow: none;
    transition: box-shadow 0.6s ease-out;
}

/* --- Attestation Toast --- */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.attestation-toast {
    pointer-events: auto;
    background: rgba(15, 10, 25, 0.95);
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    max-width: 320px;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2), 0 0 40px rgba(0, 0, 0, 0.5);
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1;
    transform: translateX(0);
}

.attestation-toast.toast-entering {
    opacity: 0;
    transform: translateX(100%);
}

.attestation-toast.toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.attestation-toast.toast-exiting {
    opacity: 0;
    transform: translateX(100%);
}

.attestation-toast__label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(168, 85, 247, 0.8);
    margin-bottom: 0.35rem;
}

.attestation-toast__name {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #e2e8f0;
    margin-bottom: 0.25rem;
}

.attestation-toast__flavor {
    font-size: 0.75rem;
    color: rgba(148, 163, 184, 0.8);
    font-style: italic;
    line-height: 1.4;
}

/* --- Dossier Page --- */
.dossier {
    max-width: 640px;
    margin: 0 auto;
}

.dossier__header {
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    background: rgba(15, 10, 25, 0.6);
}

.dossier__field {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.dossier__field:last-child {
    margin-bottom: 0;
}

.dossier__label {
    color: rgba(168, 85, 247, 0.7);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    margin-right: 0.75rem;
}

.dossier__value {
    color: #e2e8f0;
}

.dossier__title {
    color: #fbbf24;
}

.dossier__section {
    margin-bottom: 2rem;
}

.dossier__section-heading {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: rgba(168, 85, 247, 0.8);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(168, 85, 247, 0.2);
}

.dossier__attestations {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dossier__attestation {
    border: 1px solid rgba(100, 100, 120, 0.3);
    border-radius: 0.375rem;
    padding: 1rem;
    background: rgba(15, 10, 25, 0.4);
}

.dossier__attestation-name {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    color: #e2e8f0;
    margin-bottom: 0.25rem;
}

.dossier__attestation-flavor {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.8);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.dossier__attestation-date {
    font-size: 0.7rem;
    color: rgba(100, 100, 120, 0.7);
}

.dossier__empty {
    color: rgba(100, 100, 120, 0.6);
    font-size: 0.85rem;
    font-style: italic;
}