/**
 * Arcane Compass Menu - Plugin Styles
 * Version: 1.0.2 - Fixed expansion behavior
 * Author: Kyle Emmerson (SigilStatic)
 * 
 * INTENDED BEHAVIOR:
 * - Home sigil starts in corner (e.g., bottom-right)
 * - When clicked, the ENTIRE menu (home + orbitals) moves VERTICALLY
 *   - Bottom positions: moves UP
 *   - Top positions: moves DOWN  
 * - Orbitals arc out from the home sigil
 * - On collapse, everything returns to corner
 */

/* ============================================
   COMPASS MENU CONTAINER
   Fixed in corner of screen
   ============================================ */
.compass-menu {
    position: fixed;
    z-index: 9999;
    width: 400px;  /* Full expanded size */
    height: 400px; /* Full expanded size */
    pointer-events: none; /* Allow clicks through empty space */
}

/* Position the container based on corner */
/* Default: Bottom-Right */
.compass-menu,
.compass-menu.position-bottom-right {
    bottom: 40px;
    right: 40px;
}

.compass-menu.position-bottom-left {
    bottom: 40px;
    left: 40px;
    right: auto;
}

.compass-menu.position-top-right {
    top: 40px;
    right: 40px;
    bottom: auto;
}

.compass-menu.position-top-left {
    top: 40px;
    left: 40px;
    right: auto;
    bottom: auto;
}

/* ============================================
   MENU WRAPPER
   This is the element that transforms when expanded
   ============================================ */
.compass-menu .menu-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
    pointer-events: none; /* Allow clicks through */
}

/* Position wrapper so home sigil is in corner when collapsed */
/* Bottom-Right: wrapper positioned so bottom-right has the home sigil */
.compass-menu .menu-wrapper,
.compass-menu.position-bottom-right .menu-wrapper {
    bottom: 0;
    right: 0;
}

.compass-menu.position-bottom-left .menu-wrapper {
    bottom: 0;
    left: 0;
}

.compass-menu.position-top-right .menu-wrapper {
    top: 0;
    right: 0;
}

.compass-menu.position-top-left .menu-wrapper {
    top: 0;
    left: 0;
}

/* ============================================
   EXPANSION TRANSFORMS
   When expanded, shift the wrapper VERTICALLY
   ============================================ */

/* Bottom positions: Move UP (negative Y) */
.compass-menu.position-bottom-right .menu-wrapper.expanded,
.compass-menu.position-bottom-left .menu-wrapper.expanded {
    transform: translateY(-160px); /* Move up to center arc vertically */
}

/* Top positions: Move DOWN (positive Y) */
.compass-menu.position-top-right .menu-wrapper.expanded,
.compass-menu.position-top-left .menu-wrapper.expanded {
    transform: translateY(160px); /* Move down to center arc vertically */
}

/* ============================================
   HOME SIGIL
   Centered in wrapper, always at same position
   ============================================ */
.home-sigil {
    position: absolute;
    width: 80px;
    height: 80px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
    pointer-events: all; /* This element is clickable */
}

/* Home sigil position based on corner */
/* Bottom-Right: home at bottom-right of wrapper */
.compass-menu .home-sigil,
.compass-menu.position-bottom-right .home-sigil {
    bottom: 0;
    right: 0;
    top: auto;
    left: auto;
}

.compass-menu.position-bottom-left .home-sigil {
    bottom: 0;
    left: 0;
    top: auto;
    right: auto;
}

.compass-menu.position-top-right .home-sigil {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
}

.compass-menu.position-top-left .home-sigil {
    top: 0;
    left: 0;
    bottom: auto;
    right: auto;
}

.home-sigil svg {
    width: 70%;
    height: 70%;
    transition: all 0.3s ease;
}

.home-sigil svg path,
.home-sigil svg circle,
.home-sigil svg ellipse {
    fill: #00ffff;
    stroke: #00ffff;
}

.home-sigil:hover {
    z-index: 100;
}

.home-sigil:hover svg path,
.home-sigil:hover svg circle,
.home-sigil:hover svg ellipse {
    fill: #ffffff;
    stroke: #ffffff;
}

.home-sigil:hover svg {
    transform: scale(1.1);
}

/* ============================================
   ORBITAL SIGILS
   ============================================ */
.orbital-sigil {
    position: absolute;
    width: 64px;
    height: 64px;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: scale(0);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

/* Orbital default positions - stacked at home location */
/* Will be overridden by dynamic CSS when expanded */
.compass-menu .orbital-sigil,
.compass-menu.position-bottom-right .orbital-sigil {
    bottom: 8px;
    right: 8px;
}

.compass-menu.position-bottom-left .orbital-sigil {
    bottom: 8px;
    left: 8px;
    right: auto;
}

.compass-menu.position-top-right .orbital-sigil {
    top: 8px;
    right: 8px;
    bottom: auto;
}

.compass-menu.position-top-left .orbital-sigil {
    top: 8px;
    left: 8px;
    right: auto;
    bottom: auto;
}

.orbital-sigil svg {
    width: 70%;
    height: 70%;
    transition: all 0.3s ease;
}

.orbital-sigil svg path,
.orbital-sigil svg circle,
.orbital-sigil svg ellipse,
.orbital-sigil svg line {
    stroke: #00ffff;
    transition: all 0.3s ease;
}

.orbital-sigil svg path[fill="black"],
.orbital-sigil svg circle[fill="black"] {
    fill: #00ffff;
}

/* When menu is expanded, show orbital sigils */
.menu-wrapper.expanded .orbital-sigil {
    opacity: 1;
    pointer-events: all;
    transform: scale(1);
}

/* Hover effects */
.orbital-sigil:hover {
    z-index: 100;
}

.orbital-sigil:hover svg path,
.orbital-sigil:hover svg circle,
.orbital-sigil:hover svg ellipse,
.orbital-sigil:hover svg line {
    stroke: #ffffff;
}

.orbital-sigil:hover svg path[fill="black"],
.orbital-sigil:hover svg circle[fill="black"] {
    fill: #ffffff;
}

.orbital-sigil:hover svg {
    transform: scale(1.15);
}

/* Transition delays for staggered entrance */
.orbital-sigil[data-position="item-0"] { transition-delay: 0s; }
.orbital-sigil[data-position="item-1"] { transition-delay: 0.1s; }
.orbital-sigil[data-position="item-2"] { transition-delay: 0.15s; }
.orbital-sigil[data-position="item-3"] { transition-delay: 0.2s; }
.orbital-sigil[data-position="item-4"] { transition-delay: 0.25s; }
.orbital-sigil[data-position="item-5"] { transition-delay: 0.3s; }
.orbital-sigil[data-position="item-6"] { transition-delay: 0.35s; }
.orbital-sigil[data-position="item-7"] { transition-delay: 0.4s; }
.orbital-sigil[data-position="item-8"] { transition-delay: 0.45s; }
.orbital-sigil[data-position="item-9"] { transition-delay: 0.5s; }

/* ============================================
   FLOATING ANIMATIONS
   ============================================ */
@keyframes float-1 {
    0%, 100% { transform: scale(1) translateY(0px); }
    50% { transform: scale(1) translateY(-10px); }
}

@keyframes float-2 {
    0%, 100% { transform: scale(1) translateY(0px); }
    50% { transform: scale(1) translateY(-12px); }
}

@keyframes float-3 {
    0%, 100% { transform: scale(1) translateY(0px); }
    50% { transform: scale(1) translateY(-8px); }
}

@keyframes float-4 {
    0%, 100% { transform: scale(1) translateY(0px); }
    50% { transform: scale(1) translateY(-11px); }
}

@keyframes float-5 {
    0%, 100% { transform: scale(1) translateY(0px); }
    50% { transform: scale(1) translateY(-9px); }
}

/* Apply animations when expanded */
.menu-wrapper.expanded .orbital-sigil[data-position="item-0"] {
    animation: float-1 4s ease-in-out infinite;
}

.menu-wrapper.expanded .orbital-sigil[data-position="item-1"] {
    animation: float-2 4.5s ease-in-out infinite;
}

.menu-wrapper.expanded .orbital-sigil[data-position="item-2"] {
    animation: float-3 3.8s ease-in-out infinite;
}

.menu-wrapper.expanded .orbital-sigil[data-position="item-3"] {
    animation: float-4 4.2s ease-in-out infinite;
}

.menu-wrapper.expanded .orbital-sigil[data-position="item-4"] {
    animation: float-5 4.7s ease-in-out infinite;
}

.menu-wrapper.expanded .orbital-sigil[data-position="item-5"] {
    animation: float-1 4.3s ease-in-out infinite;
}

.menu-wrapper.expanded .orbital-sigil[data-position="item-6"] {
    animation: float-2 4.1s ease-in-out infinite;
}

.menu-wrapper.expanded .orbital-sigil[data-position="item-7"] {
    animation: float-3 4.6s ease-in-out infinite;
}

.menu-wrapper.expanded .orbital-sigil[data-position="item-8"] {
    animation: float-4 3.9s ease-in-out infinite;
}

.menu-wrapper.expanded .orbital-sigil[data-position="item-9"] {
    animation: float-5 4.4s ease-in-out infinite;
}

/* ============================================
   LABELS
   ============================================ */
.sigil-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #e8e6e3;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(0, 0, 0, 0.8);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Orbital sigils: Always show label on hover */
.orbital-sigil:hover .sigil-label {
    opacity: 1;
}

/* Home sigil: Only show label on hover when menu is EXPANDED */
.menu-wrapper.expanded .home-sigil:hover .sigil-label {
    opacity: 1;
}

@media (max-width: 768px) {
    .menu-wrapper.expanded .sigil-label {
        opacity: 1;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.home-sigil:focus,
.orbital-sigil:focus {
    outline: 2px solid #00ffff;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .menu-wrapper,
    .home-sigil,
    .orbital-sigil,
    .sigil-label {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
    
    .menu-wrapper.expanded .orbital-sigil {
        animation: none !important;
    }
}

/* ============================================
   MOBILE HIDING
   ============================================ */
@media (max-width: 768px) {
    .compass-menu.hide-mobile {
        display: none !important;
    }
}

/* ============================================
   ATTENTION GRABBER
   ============================================ */

/* Wiggle animation for home sigil */
@keyframes acm-attention-wiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(-5deg) scale(1.1); }
    20%, 40%, 60%, 80% { transform: rotate(5deg) scale(1.1); }
}

/* Pulse animation */
@keyframes acm-attention-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7); }
    50% { box-shadow: 0 0 0 20px rgba(0, 255, 255, 0); }
}

/* Apply animations when attention is active */
.home-sigil.acm-attention-active {
    animation: 
        acm-attention-wiggle 0.5s ease-in-out 3,
        acm-attention-pulse 1.5s ease-out infinite;
    z-index: 10000 !important;
}

/* Notification popup (not a modal) */
.acm-attention-notification {
    position: fixed;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #00ffff;
    border-radius: 8px;
    padding: 15px 20px;
    max-width: 250px;
    z-index: 9998; /* Below menu but above content */
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.5),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Position based on menu location */
/* Bottom-Right: notification appears to the left of menu */
.acm-attention-notification.position-bottom-right {
    bottom: 60px;
    right: 180px; /* Menu is 80px + 40px margin + 60px spacing */
}

/* Bottom-Left: notification appears to the right of menu */
.acm-attention-notification.position-bottom-left {
    bottom: 60px;
    left: 180px;
}

/* Top-Right: notification appears to the left and below menu */
.acm-attention-notification.position-top-right {
    top: 60px;
    right: 180px;
}

/* Top-Left: notification appears to the right and below menu */
.acm-attention-notification.position-top-left {
    top: 60px;
    left: 180px;
}

/* Visible state */
.acm-attention-notification.acm-attention-visible {
    opacity: 1;
    transform: scale(1);
}

/* Fading state - slow fade over 5 seconds */
.acm-attention-notification.acm-attention-fading {
    opacity: 0;
    transition: opacity 5s ease;
}

.acm-attention-notification p {
    color: #e8e6e3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
    text-align: center;
}

/* Arrow pointing to menu */
.acm-attention-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Bottom-Right: arrow points right */
.acm-attention-notification.position-bottom-right .acm-attention-arrow {
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #00ffff;
}

/* Bottom-Left: arrow points left */
.acm-attention-notification.position-bottom-left .acm-attention-arrow {
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px 15px 10px 0;
    border-color: transparent #00ffff transparent transparent;
}

/* Top-Right: arrow points right */
.acm-attention-notification.position-top-right .acm-attention-arrow {
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #00ffff;
}

/* Top-Left: arrow points left */
.acm-attention-notification.position-top-left .acm-attention-arrow {
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 10px 15px 10px 0;
    border-color: transparent #00ffff transparent transparent;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .acm-attention-notification {
        max-width: 200px;
        padding: 12px 15px;
    }
    
    .acm-attention-notification p {
        font-size: 0.85rem;
    }
    
    /* Adjust positioning for mobile */
    .acm-attention-notification.position-bottom-right,
    .acm-attention-notification.position-top-right {
        right: 140px;
    }
    
    .acm-attention-notification.position-bottom-left,
    .acm-attention-notification.position-top-left {
        left: 140px;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .home-sigil.acm-attention-active {
        animation: none !important;
    }
    
    .acm-attention-notification {
        transition: opacity 0.01ms !important;
    }
}

/* ============================================
   FONTAWESOME ICON SUPPORT
   ============================================ */

/* FontAwesome icons in sigils */
.home-sigil i.fas,
.home-sigil i.far,
.home-sigil i.fab,
.orbital-sigil i.fas,
.orbital-sigil i.far,
.orbital-sigil i.fab {
    font-size: 40px;
    color: var(--acm-primary, #00ffff);
    transition: all 0.3s ease;
}

.home-sigil i {
    font-size: 48px;
}

.orbital-sigil i {
    font-size: 36px;
}

/* FontAwesome hover effects */
.home-sigil:hover i,
.home-sigil:focus i,
.orbital-sigil:hover i,
.orbital-sigil:focus i {
    color: #ffffff;
    text-shadow: 0 0 10px var(--acm-primary, #00ffff);
}

/* Chromatic aberration for FontAwesome */
.home-sigil:hover i,
.home-sigil:focus i {
    filter: drop-shadow(2px 0 0 var(--acm-primary, #00ffff))
            drop-shadow(-2px 0 0 var(--acm-secondary, #ff00ff));
}

.orbital-sigil:hover i,
.orbital-sigil:focus i {
    filter: drop-shadow(2px 0 0 var(--acm-primary, #00ffff))
            drop-shadow(-2px 0 0 var(--acm-secondary, #ff00ff))
            drop-shadow(0 0 10px var(--acm-primary, #00ffff));
}

/* Mobile FontAwesome adjustments */
@media (max-width: 768px) {
    .home-sigil i {
        font-size: 38px;
    }
    
    .orbital-sigil i {
        font-size: 28px;
    }
}

/* ============================================
   MOBILE MENU SYSTEM
   Full-screen radial overlay for ≤768px
   ============================================ */

/* Mobile Trigger Button - Hidden by default, shown on mobile */
.acm-mobile-trigger {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    max-width: 60px;
    max-height: 60px;
    border-radius: 50%;
    background: var(--acm-bg-color, rgba(0, 0, 0, 0.9));
    backdrop-filter: blur(10px);
    border: 2px solid var(--acm-primary, #00ffff);
    cursor: pointer;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.acm-mobile-trigger:active {
    transform: scale(0.95);
    filter: brightness(1.3);
}

.acm-mobile-trigger svg {
    width: 60%;
    height: 60%;
}

.acm-mobile-trigger svg path,
.acm-mobile-trigger svg circle,
.acm-mobile-trigger svg ellipse,
.acm-mobile-trigger svg line {
    stroke: var(--acm-primary, #00ffff);
    fill: none;
    transition: stroke 0.2s ease;
}

.acm-mobile-trigger i.fas,
.acm-mobile-trigger i.far,
.acm-mobile-trigger i.fab {
    font-size: 28px;
    color: var(--acm-primary, #00ffff);
    transition: color 0.2s ease;
}

/* Trigger pulse animation - uses custom colors */
@keyframes mobile-trigger-pulse {
    0%, 100% { 
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.5),
            0 0 30px var(--acm-primary),
            inset 0 0 20px rgba(0, 0, 0, 0.3);
        opacity: 1;
    }
    50% { 
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.5),
            0 0 45px var(--acm-primary),
            inset 0 0 20px rgba(0, 0, 0, 0.3);
        opacity: 0.95;
    }
}

.acm-mobile-trigger.pulse {
    animation: mobile-trigger-pulse 2s ease-in-out infinite;
}

/* Mobile Overlay - Hidden by default */
.acm-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.acm-mobile-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile Backdrop - Uses background color with opacity */
.acm-mobile-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at center, 
        rgba(0, 0, 0, 0.85) 0%, 
        rgba(0, 0, 0, 0.98) 100%
    );
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Mobile Menu Wrapper */
.acm-mobile-menu-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Sigils Container */
.acm-mobile-sigils {
    position: relative;
    width: 300px;
    height: 300px;
    min-width: 300px;
    min-height: 300px;
    max-width: 300px;
    max-height: 300px;
}

/* Mobile Sigil Items - Uses background color and opacity */
.acm-mobile-sigil {
    position: absolute;
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    max-width: 64px;
    max-height: 64px;
    border-radius: 50%;
    background: var(--acm-bg-color, rgba(0, 0, 0, 0.7));
    border: 1.5px solid var(--item-color, var(--acm-primary, #00ffff));
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(0, 255, 255, 0.15),
        inset 0 0 20px rgba(0, 0, 0, 0.4);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    backdrop-filter: blur(8px);
}

/* Visible state for sigils */
.acm-mobile-overlay.active .acm-mobile-sigil {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* Staggered entrance animations */
.acm-mobile-sigil:nth-child(1) { transition-delay: 0.05s; }
.acm-mobile-sigil:nth-child(2) { transition-delay: 0.10s; }
.acm-mobile-sigil:nth-child(3) { transition-delay: 0.15s; }
.acm-mobile-sigil:nth-child(4) { transition-delay: 0.20s; }
.acm-mobile-sigil:nth-child(5) { transition-delay: 0.25s; }
.acm-mobile-sigil:nth-child(6) { transition-delay: 0.30s; }
.acm-mobile-sigil:nth-child(7) { transition-delay: 0.35s; }
.acm-mobile-sigil:nth-child(8) { transition-delay: 0.40s; }
.acm-mobile-sigil:nth-child(9) { transition-delay: 0.45s; }
.acm-mobile-sigil:nth-child(10) { transition-delay: 0.50s; }

/* Subtle floating animations for mobile sigils (no hover required) */
@keyframes mobile-float-1 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-5px); }
}

@keyframes mobile-float-2 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-6px); }
}

@keyframes mobile-float-3 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-4px); }
}

@keyframes mobile-float-4 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-5.5px); }
}

@keyframes mobile-float-5 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-4.5px); }
}

/* Apply subtle floating animations when overlay is active */
.acm-mobile-overlay.active .acm-mobile-sigil:nth-child(1) {
    animation: mobile-float-1 5s ease-in-out infinite;
}

.acm-mobile-overlay.active .acm-mobile-sigil:nth-child(2) {
    animation: mobile-float-2 5.5s ease-in-out infinite;
}

.acm-mobile-overlay.active .acm-mobile-sigil:nth-child(3) {
    animation: mobile-float-3 4.8s ease-in-out infinite;
}

.acm-mobile-overlay.active .acm-mobile-sigil:nth-child(4) {
    animation: mobile-float-4 5.2s ease-in-out infinite;
}

.acm-mobile-overlay.active .acm-mobile-sigil:nth-child(5) {
    animation: mobile-float-5 5.7s ease-in-out infinite;
}

.acm-mobile-overlay.active .acm-mobile-sigil:nth-child(6) {
    animation: mobile-float-1 5.3s ease-in-out infinite;
}

.acm-mobile-overlay.active .acm-mobile-sigil:nth-child(7) {
    animation: mobile-float-2 5.1s ease-in-out infinite;
}

.acm-mobile-overlay.active .acm-mobile-sigil:nth-child(8) {
    animation: mobile-float-3 5.6s ease-in-out infinite;
}

.acm-mobile-overlay.active .acm-mobile-sigil:nth-child(9) {
    animation: mobile-float-4 4.9s ease-in-out infinite;
}

.acm-mobile-overlay.active .acm-mobile-sigil:nth-child(10) {
    animation: mobile-float-5 5.4s ease-in-out infinite;
}

/* Active/touch state - Uses primary color for glow */
.acm-mobile-sigil:active {
    transform: translate(-50%, -50%) scale(1.1) !important;
    border-width: 2px;
}

/* Remove focus outline */
.acm-mobile-sigil:focus {
    outline: none;
}

.acm-mobile-trigger:focus {
    outline: none;
}

.acm-mobile-close:focus {
    outline: none;
}

/* Mobile sigil SVG styles */
.acm-mobile-sigil svg {
    width: 60%;
    height: 60%;
}

.acm-mobile-sigil svg path,
.acm-mobile-sigil svg circle,
.acm-mobile-sigil svg ellipse,
.acm-mobile-sigil svg line {
    stroke: var(--item-color, var(--acm-primary, #00ffff));
    fill: none;
    transition: all 0.2s ease;
}

.acm-mobile-sigil svg path[fill="black"],
.acm-mobile-sigil svg circle[fill="black"] {
    fill: var(--item-color, var(--acm-primary, #00ffff));
}

/* Mobile sigil FontAwesome icons */
.acm-mobile-sigil i.fas,
.acm-mobile-sigil i.far,
.acm-mobile-sigil i.fab {
    font-size: 26px;
    color: var(--item-color, var(--acm-primary, #00ffff));
    transition: all 0.2s ease;
}

/* Active/hover effects on mobile sigils - White highlight on touch */
.acm-mobile-sigil:active svg path,
.acm-mobile-sigil:active svg circle,
.acm-mobile-sigil:active svg ellipse,
.acm-mobile-sigil:active svg line {
    stroke: #ffffff;
    filter: drop-shadow(0 0 10px var(--item-color, var(--acm-primary)));
}

.acm-mobile-sigil:active svg path[fill="black"],
.acm-mobile-sigil:active svg circle[fill="black"] {
    fill: #ffffff;
}

.acm-mobile-sigil:active i {
    color: #ffffff;
    filter: drop-shadow(0 0 10px var(--item-color, var(--acm-primary)));
}

/* Mobile sigil labels */
.acm-mobile-sigil .sigil-label {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--acm-primary, #00ffff);
    white-space: nowrap;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--acm-bg-color, rgba(0, 0, 0, 0.9));
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    opacity: 1;
    text-shadow: 0 0 8px var(--acm-primary, #00ffff);
}

/* Close button in mobile overlay - Uses background and primary colors */
.acm-mobile-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    max-height: 44px;
    border: none;
    background: var(--acm-bg-color, rgba(0, 0, 0, 0.7));
    border-radius: 50%;
    color: var(--acm-primary, #00ffff);
    font-size: 28px;
    line-height: 1;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border: 1.5px solid var(--acm-primary, #00ffff);
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s ease;
}

.acm-mobile-close:active {
    transform: scale(0.9);
    filter: brightness(1.2);
}

/* MOBILE MEDIA QUERY */
@media (max-width: 768px) {
    /* Hide desktop compass menu completely */
    .compass-menu .menu-wrapper {
        display: none !important;
    }
    
    .compass-menu .home-sigil,
    .compass-menu .orbital-sigil {
        display: none !important;
    }
    
    /* Show mobile trigger button */
    .acm-mobile-trigger {
        display: flex;
    }
    
    /* Show mobile overlay structure */
    .acm-mobile-overlay {
        display: block;
    }
    
    /* Adjust trigger position based on settings */
    .compass-menu[data-mobile-trigger="bottom-left"] ~ .acm-mobile-trigger {
        left: 20px;
        right: auto;
    }
    
    .compass-menu[data-mobile-trigger="bottom-center"] ~ .acm-mobile-trigger {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    
    /* Smaller sigils on very small screens */
    @media (max-width: 375px) {
        .acm-mobile-sigils {
            width: 260px;
            height: 260px;
            min-width: 260px;
            min-height: 260px;
            max-width: 260px;
            max-height: 260px;
        }
        
        .acm-mobile-sigil {
            width: 52px;
            height: 52px;
            min-width: 52px;
            min-height: 52px;
            max-width: 52px;
            max-height: 52px;
        }
        
        .acm-mobile-sigil i {
            font-size: 22px;
        }
        
        .acm-mobile-sigil .sigil-label {
            font-size: 0.6rem;
            padding: 0.2rem 0.4rem;
        }
    }
}

/* Reduced motion support for mobile */
@media (prefers-reduced-motion: reduce) {
    .acm-mobile-trigger,
    .acm-mobile-overlay,
    .acm-mobile-sigil {
        transition-duration: 0.01ms !important;
    }
    
    .acm-mobile-trigger.pulse {
        animation: none !important;
    }
    
    .acm-mobile-sigil:nth-child(n) {
        transition-delay: 0s !important;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .acm-mobile-sigils {
        width: 240px;
        height: 240px;
        min-width: 240px;
        min-height: 240px;
        max-width: 240px;
        max-height: 240px;
    }
    
    .acm-mobile-sigil {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        max-width: 50px;
        max-height: 50px;
    }
    
    .acm-mobile-sigil i {
        font-size: 22px;
    }
}