/* =========================================
   MIND PALACE ISOMETRIC MENU (v18.0 - SAFE 3D CONTEXT)
   - Fixes "Flattened" look by removing container transforms
   - Fixes "Unclickable" by enforcing pointer-events on cards
   - Alignment: Cards calculate their own offsets relative to the base
   ========================================= */

/* --- 1. MAIN ANCHOR --- */
#fixedActionsArea { 
    position: fixed; 
    z-index: 4000 !important; 
    pointer-events: none; /* Let clicks pass through empty space */
    
    /* Box Dimensions */
    width: 180px; 
    height: 100px;
    
    /* CRITICAL: Allow cards to render outside this box */
    overflow: visible !important; 
}

/* Bottom Center */
#fixedActionsArea:not(.pos-corner) { 
    bottom: 60px !important; 
    left: 50%; 
    transform: translateX(-50%); 
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Corner Position */
#fixedActionsArea.pos-corner { 
    top: 20px; 
    right: 20px; 
    left: auto; 
    bottom: auto; 
    /* UPDATED: Changed 0.9 -> 1.0 for full size */
    transform: scale(0.9); 
    transform-origin: top right; 
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); 
    pointer-events: auto; 
}
#fixedActionsArea.pos-corner.expanded { 
    transform: scale(1) !important; 
    z-index: 5000; 
}


/* --- 2. MENU CONTAINERS (SIBLINGS) --- */
.iso-menu-container {
    position: absolute;
    bottom: 0; 
    right: 0;
    width: 180px; 
    height: 100px;
    
    /* Establish 3D Space for Children */
    perspective: 1000px;
    transform-style: preserve-3d;
    
    /* Layout */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    /* Visibility */
    transition: opacity 0.3s ease;
    pointer-events: none; /* Container ignores clicks, cards accept them */
    opacity: 0;
    z-index: -1;
}

/* 2A. MAIN MENU (Always Visible Anchor) */
#mainPalaceMenu {
    right: 0;
    opacity: 1 !important;
    z-index: 10;
}

/* 2B. SUBMENUS (Left Side) */
#deckSubMenu, 
#campusSubMenu {
    right: 220px !important; /* Move 200px left */
    z-index: 90;
    /* REMOVED: transform: translateY(...) to prevent flattening */
}

/* Active State */
.iso-menu-container.open {
    opacity: 1;
    z-index: 100;
}
.iso-menu-container.hidden {
    opacity: 0 !important;
}


/* --- 3. CARD STYLING --- */
.iso-card {
    position: absolute;
    width: 180px !important;
    height: 100px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    
    /* CRITICAL 3D SETTINGS */
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;

    background: var(--bg-card, #1f2937);
    border: 1px solid var(--border-primary, #374151);
    border-radius: 4px;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.5), 5px 5px 10px rgba(0,0,0,0.3);
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* FORCE CLICKABILITY */
    pointer-events: auto !important; 
    cursor: pointer !important;
    
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.2s, border-color 0.2s;
}

/* --- 4. POSITIONING LOGIC (The Math) --- */

/* A. MAIN MENU - STATIC STACKING */
/* When closed, stack nicely at bottom */
#mainPalaceMenu:not(.open) .iso-card { 
    transform: translateY(calc(var(--i) * 6px)) translateZ(calc(var(--i) * -1px)) rotateX(35deg) rotateZ(10deg); 
    z-index: calc(20 - var(--i));
}
/* Assign Indices for Main Menu */
#mainPalaceMenu .iso-card:nth-last-child(1) { --i: 0; } /* Logo */
#mainPalaceMenu .iso-card:nth-last-child(2) { --i: 1; }
#mainPalaceMenu .iso-card:nth-last-child(3) { --i: 2; }
#mainPalaceMenu .iso-card:nth-last-child(4) { --i: 3; }
#mainPalaceMenu .iso-card:nth-last-child(5) { --i: 4; }
#mainPalaceMenu .iso-card:nth-last-child(6) { --i: 5; }
#mainPalaceMenu .iso-card:nth-last-child(7) { --i: 6; }
#mainPalaceMenu .iso-card:nth-last-child(8) { --i: 7; }
#mainPalaceMenu .iso-card:nth-last-child(9) { --i: 8; }


/* B. BOTTOM MODE - EXPANDED */
/* Main Menu: Fans UP from 0 to -480px */
#fixedActionsArea:not(.pos-corner) #mainPalaceMenu.open .iso-card {
    /* --i=0 (Logo) goes to -480px. --i=8 (Delete) stays near 0. */
    transform: translateY(calc(var(--i) * 60px - 480px)) translateZ(20px) rotateX(35deg) rotateZ(10deg);
}

/* Submenus: Fan DOWN from -480px */
/* JS provides --ty (0, 60, 120...) */
/* We Start at -480px (Top of Main Menu) and ADD --ty to go down */
#fixedActionsArea:not(.pos-corner) #deckSubMenu .iso-card,
#fixedActionsArea:not(.pos-corner) #campusSubMenu .iso-card {
    transform: translateY(calc(-440px + var(--ty))) translateZ(var(--tz, 10px)) rotateX(35deg) rotateZ(10deg);
}

/* C. CORNER MODE - EXPANDED */
/* Main Menu: Fans DOWN from 0 */
#fixedActionsArea.pos-corner #mainPalaceMenu.open .iso-card {
    transform: translateY(calc(var(--i) * 60px)) translateZ(20px) rotateX(35deg) rotateZ(10deg);
}

/* Submenus: Fan DOWN from 0 */
#fixedActionsArea.pos-corner #deckSubMenu .iso-card,
#fixedActionsArea.pos-corner #campusSubMenu .iso-card {
    transform: translateY(var(--ty)) translateZ(var(--tz, 10px)) rotateX(35deg) rotateZ(10deg);
}


/* --- 5. CLOSED SUBMENUS --- */
/* Collapse them to origin */
#deckSubMenu:not(.open) .iso-card,
#campusSubMenu:not(.open) .iso-card {
    transform: translateY(0px) rotateX(35deg) rotateZ(10deg);
}


/* --- 6. VISUALS (Text & Glow) --- */
.iso-card-label {
    position: relative;
    z-index: 10; 
    display: block !important;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-primary, #ffffff);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.iso-card.card-menu .iso-card-label {
    font-family: 'Dancing Script', cursive !important;
    font-size: 2.2rem !important;
    text-transform: none !important;
    color: var(--accent-primary, #fbbf24);
}


/* Hover State */
.iso-menu-container.open .iso-card:hover {
    filter: brightness(1.15);
    border-color: var(--accent-primary, #fbbf24) !important;
    /* Pop UP visually on hover */
    z-index: 500 !important;
}

/* --- 7. HITBOX --- */
.iso-card.card-menu::before {
    content: ""; position: absolute;
    top: -30px; left: -30px; right: -30px; bottom: -30px;
    z-index: 100; pointer-events: auto;
}

/* =========================================
   ISO CARD ARCHITECTURE (Final Polish)-----
   Problem Solved: 
   - "Double Ray" Glitch: Caused by gradient definitions on both Parent and Child.
   - Solution: Force Parent background to transparent; isolate gradient to ::before.
   ========================================= */

/* 1. THE CONTAINER (Structure Only) */
.sparkle-border-glow {
    /* CRITICAL: Kill any background on the parent to prevent the "Double Ray" ghost */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    
    /* Keep the "Inset" look by clipping the ::before layer */
    overflow: hidden !important; 
    
    /* Force 2D rendering to prevent the "Disappearing Card" glitch */
    transform-style: flat !important;
    isolation: isolate;
}

/* 2. THE SPINNER (The Gradient Layer) */
.sparkle-border-glow::before {
    content: "";
    position: absolute;
    
    /* SIZE: Make it huge (200%) so the corners are covered during rotation */
    width: 200%;
    height: 200%;
    
    /* CENTER IT: Position the center of the gradient at the center of the card */
    top: 50%;
    left: 50%;
    
    /* THE TRICK: Translate centers it, Rotate spins it */
    transform: translate(-50%, -50%) rotate(0deg);
    
    background: conic-gradient(
        from 0deg, 
        transparent 0%, 
        transparent 70%, 
        #d97706 85%, 
        #fbbf24 90%, 
        #ffffff 95%, 
        transparent 100%
    );
    
    animation: rotateSparkle 2s linear infinite;
    z-index: 0; /* Sits at the very bottom */
    
    /* Ensure it catches no mouse events */
    pointer-events: none;
}

/* 3. THE BODY (The Opaque Mask) */
/* This shrinks to create the "Inset" border effect */
.sparkle-border-glow .iso-card-body {
    position: absolute;
    inset: 2px !important; /* The 2px Border Thickness */
    border-radius: 3px;
    
    /* Ensure opacity so we don't see the gradient behind the text */
    background: var(--bg-card, #4e342e) !important;
    z-index: 1;
}

/* 4. THE ANIMATION */
@keyframes rotateSparkle {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/* --- 3. MOBILE ONLY (Max-Width: 768px) --- */
@media screen and (max-width: 768px) {
    /* Base Position: Lower down (80px) */
    #fixedActionsArea:not(.pos-corner) {
        bottom: 80px !important;
        transition: all 0.4s ease !important;
    }

    /* Open State: Drop LOWER (Now -10px instead of 10px) */
    /* This moves the Main Menu down by 20px compared to before */
    #fixedActionsArea:not(.pos-corner).is-open {
        bottom: -10px !important; 
    }

    /* Shift State: Slide to the Right Edge (KEPT AS IS) */
    #fixedActionsArea:not(.pos-corner).is-shifted {
        /* 1. Move the anchor point to the far right edge of the screen */
        left: 100% !important;
        
        /* 2. Slide the element back by its own width (100%) + slight padding (10px) */
        transform: translateX(calc(-100% - 10px)) !important;
        
        right: auto !important; 
    }

    /* Tighter Submenu Spacing for Phones */
    #deckSubMenu, #campusSubMenu {
        right: 150px !important;
    }
    
    /* Corner Menu: Half Size */
    #fixedActionsArea.pos-corner {
        transform: scale(0.5) !important;
        top: 15px !important;
        right: 15px !important;
    }
    
    /* ADJUST SUBMENU HEIGHT FOR MOBILE BOTTOM POSITION */
    /* PREVIOUS: -420px */
    /* NEW: -400px (Moves them down an ADDITIONAL 20px relative to the main menu) */
    #fixedActionsArea:not(.pos-corner) #deckSubMenu .iso-card,
    #fixedActionsArea:not(.pos-corner) #campusSubMenu .iso-card {
        transform: translateY(calc(-400px + var(--ty))) translateZ(var(--tz, 10px)) rotateX(35deg) rotateZ(10deg) !important;
    }
}