/* ========================================
   CANVAS EFFECT STYLES - WITH SPELLBOOK BLUR
   Grimoire (Type & Click modes) = Bubbles, Spellbook = Swirl + Frosted Blur
   ======================================== */
.grimoire-canvas-container,
.click-runes-canvas-container,
.spellbook-canvas-container,
.about-canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    display: none;
}

/* DEFAULT: Show Grimoire bubbles on main page (Type Runes mode) */
body .grimoire-canvas-container {
    display: block;
}

/* ALSO show Grimoire bubbles when in Click Runes mode */
body.click-runes-mode .grimoire-canvas-container {
    display: block !important;
}

/* NEVER show Click Runes canvas - we use grimoire for both modes */
body .click-runes-canvas-container,
body.click-runes-mode .click-runes-canvas-container {
    display: none !important;
}

/* Show About canvas on about page */
body.about-page .about-canvas-container {
    display: block;
}

/* Hide grimoire when on about page */
body.about-page .grimoire-canvas-container {
    display: none !important;
}

/* Show Spellbook (swirl) canvas ONLY on spellbook page */
body.spellbook-page .spellbook-canvas-container {
    display: block;
}

/* Hide all other canvases when on spellbook page */
body.spellbook-page .grimoire-canvas-container,
body.spellbook-page .click-runes-canvas-container,
body.spellbook-page .about-canvas-container {
    display: none !important;
}

/* Hide spellbook canvas when NOT on spellbook page */
body:not(.spellbook-page) .spellbook-canvas-container {
    display: none !important;
}

.container,
.page {
    position: relative;
    z-index: 1;
}

#result {
    position: relative;
    z-index: 2;
}

.grimoire-canvas-container canvas,
.click-runes-canvas-container canvas,
.spellbook-canvas-container canvas,
.about-canvas-container canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Somber lowfi overlay for grimoire - BOTH Type and Click modes */
body:not(.spellbook-page):not(.about-page) .grimoire-canvas-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(4px) brightness(1) saturate(1);
    pointer-events: none;
}

/* FROSTED BLUR OVERLAY for Spellbook - 1px blur, full vivid, no color loss */
body.spellbook-page .spellbook-canvas-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px) brightness(1.0) saturate(1.0);
    -webkit-backdrop-filter: blur(2px) brightness(1.0) saturate(1.0);
    pointer-events: none;
    z-index: 3;
}

.about-bg-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}