#gold-cross {
    position: fixed; /* Keep it fixed on the screen */
    top: 15%; /* Position from the top */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Fine-tune horizontal centering */
    width: 30px; /* Thinner vertical bar */
    height: 120px;
    z-index: 1;
    pointer-events: none;
    background-color: #FFD700; /* Bright gold color */
    box-shadow: 
        0 0 10px #FFD700,
        0 0 20px #FFD700,
        0 0 40px #FFD700;
}

#gold-cross::after {
    content: '';
    position: absolute;
    top: 35px;
    left: -35px;
    width: 100px;
    height: 30px;
    background: #FFD700;
    box-shadow: 
        0 0 10px #FFD700,
        0 0 20px #FFD700,
        0 0 40px #FFD700;
}

#gold-cross::before,
#gold-cross::after {
    content: '';
    position: absolute;
    background: #FFD700; /* Match the cross color */
    box-shadow: 
        0 0 10px #FFD700,
        0 0 20px #FFD700,
        0 0 40px #FFD700,
        0 0 60px #FFA500;
}


/* --- Background Shapes Container --- */
#shape-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1; /* Behind everything */
    pointer-events: none;
}

/* --- Background Shapes - EDUCATIONAL GEOMETRY --- */
.background-shape {
    --dark-gray: #333333;
    position: absolute;
    width: var(--shape-size, 40px);
    height: var(--shape-size, 40px);
    background-color: var(--dark-gray);
    opacity: var(--opacity, 0.6);
    pointer-events: none;
    animation: slow-drift var(--duration, 60s) ease-in-out infinite alternate;
}

@keyframes slow-drift {
    0% {
        transform: var(--base-transform, scale(1)) translate3d(0, 0, 0) rotate(0deg);
    }
    100% {
        transform: var(--base-transform, scale(1)) translate3d(var(--dx, 20px), var(--dy, 20px), 0) rotate(var(--rotation, 360deg));
    }
}

.background-shape.circle { border-radius: 50%; }
.background-shape.square { border-radius: 5px; }
.background-shape.rectangle { border-radius: 3px; --base-transform: scaleX(1.6); }
.background-shape.triangle {
    width: 0 !important;
    height: 0 !important;
    background-color: transparent !important;
    border-left: calc(var(--shape-size, 40px) / 2) solid transparent;
    border-right: calc(var(--shape-size, 40px) / 2) solid transparent;
    border-bottom: calc(var(--shape-size, 40px) * 0.866) solid var(--dark-gray);
    opacity: 0.25;
}
.background-shape.quadrilateral { clip-path: polygon(15% 10%, 85% 5%, 90% 90%, 10% 95%); }
.background-shape.parallelogram { clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); }
.background-shape.rhombus { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.background-shape.trapezoid { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); }
.background-shape.kite { clip-path: polygon(50% 0%, 100% 50%, 50% 90%, 0% 50%); }
.background-shape.pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.background-shape.hexagon { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.background-shape.heptagon { clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); }
.background-shape.octagon { clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); }
.background-shape.nonagon { clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%); }
.background-shape.decagon { clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); }
.background-shape.hendecagon { clip-path: polygon(50% 0%, 75% 5%, 95% 25%, 100% 50%, 95% 75%, 75% 95%, 50% 100%, 25% 95%, 5% 75%, 0% 50%, 5% 25%, 25% 5%); }
.background-shape.dodecagon { clip-path: polygon(50% 0%, 70% 5%, 87% 17%, 97% 33%, 100% 50%, 97% 67%, 87% 83%, 70% 95%, 50% 100%, 30% 95%, 13% 83%, 3% 67%, 0% 50%, 3% 33%, 13% 17%, 30% 5%); }
.background-shape.star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.background-shape.star6 { clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0% 38%, 37% 38%); }
.background-shape.star8 { clip-path: polygon(50% 0%, 58% 30%, 85% 15%, 70% 42%, 100% 50%, 70% 58%, 85% 85%, 58% 70%, 50% 100%, 42% 70%, 15% 85%, 30% 58%, 0% 50%, 30% 42%, 15% 15%, 42% 30%); }
.background-shape.ellipse { border-radius: 50%; --base-transform: scaleX(1.7); }
.background-shape.oval { border-radius: 50%; --base-transform: scaleY(1.4); }
.background-shape.crescent { clip-path: polygon(40% 0%, 45% 20%, 45% 80%, 40% 100%, 0% 100%, 25% 50%, 0% 0%); } /* Placeholder for improved crescent */
.background-shape.crescent { clip-path: path('M 20 0 A 20 20 0 1 0 20 40 A 15 15 0 1 1 20 0 Z'); --base-transform: scale(calc(var(--shape-size, 40px) / 40)); }
.background-shape.semicircle { border-radius: 100% 100% 0 0; }
.background-shape.diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); --base-transform: rotate(45deg); }
.background-shape.arrow { clip-path: polygon(0% 30%, 70% 30%, 70% 0%, 100% 50%, 70% 100%, 70% 70%, 0% 70%); }
.background-shape.chevron { clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%); }
.background-shape.cross { clip-path: polygon(33% 0%, 67% 0%, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0% 67%, 0% 33%, 33% 33%); }
.background-shape.plus { clip-path: polygon(40% 0%, 60% 0%, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%, 0% 40%, 40% 40%); }
.background-shape.heart { clip-path: path('M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z'); --base-transform: scale(calc(var(--shape-size, 40px) / 24)); }
.background-shape.teardrop { border-radius: 50% 0 50% 50%; --base-transform: rotate(-45deg); }
.background-shape.lshape { clip-path: polygon(0% 0%, 40% 0%, 40% 60%, 100% 60%, 100% 100%, 0% 100%); }
.background-shape.tshape { clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 60% 40%, 60% 100%, 40% 100%, 40% 40%, 0% 40%); }