/* Canvas containers - common styles */
[class$='-canvas-container'] {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none !important;
    z-index: 0 !important;
    overflow: hidden;
    display: none !important;
    visibility: hidden !important;
    opacity: 0;
}

[class$='-canvas-container'] canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Default: Show grimoire canvas */
.grimoire-canvas-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1;
}

/* Show appropriate canvas per page */
body.about-page .grimoire-canvas-container { display: none !important; visibility: hidden !important; opacity: 0; }
body.about-page .about-canvas-container { display: block !important; visibility: visible !important; opacity: 1; }
body.runes-page .grimoire-canvas-container { display: none !important; visibility: hidden !important; opacity: 0; }
body.runes-page .runes-canvas-container { display: block !important; visibility: visible !important; opacity: 1; }

/* Z-index hierarchy */
.container, .page { position: relative; z-index: 1 !important; }
.nav-buttons { position: fixed; z-index: 1000 !important; }
#result { position: relative; z-index: 10 !important; }
.form-section, .runes-content, .about-content { position: relative; z-index: 5 !important; }

/* Prevent overflow */
body { overflow-x: hidden; position: relative; }

/* Animations */
.fade-in { animation: fadeIn 0.6s ease forwards; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}