/* High-Z-Index Modal & Fixed Transition */
.tog-wheel-overlay {
    position: fixed !important;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(27, 10, 40, 0.96);
    backdrop-filter: blur(12px);
    z-index: 99999 !important; /* Ensure it's above everything */
    display: flex;
    align-items: center;
    justify-content: center;
}

.tog-wheel-modal {
    width: 95%; max-width: 850px; min-height: 500px;
    background: #fff; position: relative;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.8);
    border: 1px solid rgba(201, 168, 76, 0.4);
}

.wheel-outer-border {
    padding: 12px; border: 8px solid #C9A84C; border-radius: 50%;
    background: #3B1F5E; box-shadow: inset 0 0 30px rgba(0,0,0,0.6);
}

.wheel-container {
    position: relative; width: 320px; height: 320px;
}

#sacredWheelCanvas {
    width: 100%; height: 100%; border-radius: 50%;
    transition: transform 5s cubic-bezier(0.15, 0, 0.15, 1);
    will-change: transform;
}

.wheel-pointer {
    position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
    width: 45px; height: 50px; background: #C9A84C;
    clip-path: polygon(50% 100%, 0 0, 100% 0); z-index: 20;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.4));
}

.wheel-center-hub {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 60px; height: 60px; background: #C9A84C; border-radius: 50%; z-index: 21;
    border: 5px solid #2A1240; box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.btn-close-ritual {
    position: absolute; top: 15px; right: 20px; z-index: 30;
    background: none; border: none; font-size: 2.5rem; color: #2A1240; cursor: pointer;
}

@media (max-width: 768px) {
    .tog-wheel-modal { height: auto; max-height: 95vh; overflow-y: auto; }
    .wheel-container { width: 240px; height: 240px; }
}