:root {
    /* Fluid sizing - reduced by 20% for subtler reveal */
    --menu-button-size: clamp(100px, 12vw, 150px);
    --menu-button-offset: clamp(-25px, -3vw, -45px);
    --menu-item-height: clamp(42px, 5vh, 55px);
    --menu-item-width-closed: 0px;  /* Starts hidden/collapsed */
    --menu-item-width-open: clamp(200px, 32vw, 340px);  /* Increased for longer text - was clamp(176px, 28vw, 280px) */
    --menu-item-width-peak: calc(var(--menu-item-width-open) + 15px);
    --rotation-step: clamp(12deg, 2.5vw, 18deg);
    --animation-duration-open: 1.65s;  /* Matched to mobile speed */
    --animation-duration-close: 1.125s; /* Matched to mobile speed */
    --animation-delay-step: 0.15s;    /* 150ms between items */
    
    /* Fluid typography */
    --menu-label-size: clamp(11px, 1.4vw, 15px);
    --menu-text-size: clamp(13px, 1.8vw, 17px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* Remove mobile tap highlight */
}

html {
    height: 100%;
}

body {
    min-height: 100vh;
    min-width: 100vw;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(0,0,0,0.1) 1px, transparent 1px);
    font-family: 'Arial', sans-serif;
    overflow: hidden;
    position: relative;
}

/* Make background pattern scale with viewport */
body::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05) 0.5px, transparent 0.5px),
        radial-gradient(circle at 80% 70%, rgba(0,0,0,0.05) 0.5px, transparent 0.5px);
    background-size: 50px 50px, 40px 40px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.circle-button:hover::before {
    opacity: 1;
}

.circle-button {
    position: fixed;
    bottom: var(--menu-button-offset);
    right: var(--menu-button-offset);
    width: var(--menu-button-size);
    height: var(--menu-button-size);
    padding-right: 12px;
    padding-bottom: 8px;
    border-radius: 50%;
    background: 
        radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.8), transparent 50%),
        linear-gradient(135deg, #f8f9fa 0%, #e9ecef 20%, #dee2e6 40%, #39546f 100%);
    box-shadow: 
        0 8px 32px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.8),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* Remove blue tap highlight on mobile */
}

/* Subtle touch feedback for mobile */
.circle-button:active {
    background: 
        radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.5), transparent 50%),
        linear-gradient(135deg, #e9ecef 0%, #dee2e6 20%, #d1d8dd 40%, #2c3e50 100%);
    transform: scale(0.95);
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.5vh, 4px);
    margin-bottom: clamp(3px, 1vh, 6px);
}

.hamburger-line {
    width: clamp(32px, 5vw, 50px);
    height: clamp(3px, 0.7vh, 5px);
    background: linear-gradient(90deg, #2c3e50, #34495e);
    border-radius: clamp(4px, 0.5vw, 8px);
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center;
}

.menu-open .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translateY(5px);
}

.menu-open .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.menu-open .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translateY(-5px);
}

.menu-label {
    font-size: var(--menu-label-size);
    font-weight: bold;
    color: #2c3e50;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    /* Optimize for tablets and large phones */
    :root {
        --menu-button-offset: -20px;
        --menu-item-width-open: min(320px, 70vw);  /* Increased from 280px for longer text */
        --rotation-step: 12deg;
    }
}

@media (max-width: 480px) {
    /* Optimize for phones */
    :root {
        --menu-button-size: clamp(80px, 18vw, 120px);
        --menu-button-offset: -15px;
        --menu-item-height: 44px;
        --menu-item-width-open: min(280px, 85vw);  /* Increased from 240px for longer text */
        --rotation-step: 10deg;
        --animation-duration-open: 1.65s;  /* 50% slower than 1.1s */
        --animation-duration-close: 1.125s; /* 50% slower than 0.75s */
    }
}

.circle-button:hover {
    transform: scale(1.05);
    box-shadow: 
        inset 0 2px 4px rgba(255,255,255,0.3),
        inset 0 -2px 4px rgba(0,0,0,0.4),
        0 6px 12px rgba(0,0,0,0.5);
}

.circle-button {
    position: fixed;
    bottom: var(--menu-button-offset);
    right: var(--menu-button-offset);
    width: var(--menu-button-size);
    height: var(--menu-button-size);
    padding-right: 12px;
    padding-bottom: 8px;
    border-radius: 50%;
    background: 
        radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.8), transparent 50%),
        linear-gradient(135deg, #f8f9fa 0%, #e9ecef 20%, #dee2e6 40%, #39546f 100%);
    box-shadow: 
        0 8px 32px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.8),
        inset 0 -1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow: visible;
}

.circle-button::before {
    content: '';
    position: absolute;
    top: -2.5px;
    left: -2.5px;
    right: -2.5px;
    bottom: -2.5px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        #ff0000 0deg,
        #ff7f00 51.43deg,
        #ffff00 102.86deg,
        #00ff00 154.29deg,
        #0000ff 205.71deg,
        #4b0082 257.14deg,
        #9400d3 308.57deg,
        #ff0000 360deg
    );
    z-index: -2;
    animation: rotateRainbow 8s linear infinite;
    pointer-events: none;
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.6),
        inset 0 -1px 2px rgba(0,0,0,0.4),
        0 1px 1px rgba(0,0,0,0.3);
    filter: brightness(1.1) contrast(1.2);
}

.circle-button::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 20%, #dee2e6 40%, #39546f 100%);
    z-index: -1;
    filter: blur(0.5px);
}

.circle-button:active {
    transform: scale(0.97);
    box-shadow: 
        inset 0 4px 8px rgba(0,0,0,0.4),
        inset 0 -2px 4px rgba(255,255,255,0.2),
        0 4px 16px rgba(0,0,0,0.2);
    background: 
        radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.5), transparent 50%),
        linear-gradient(135deg, #f8f9fa 0%, #e9ecef 20%, #dee2e6 40%, #39546f 100%);
}

.menu-container {
    position: fixed;
    bottom: var(--menu-button-offset);
    right: var(--menu-button-offset);
    pointer-events: none;
    z-index: 998;
    width: 400px;
    height: 300px;
    transform-origin: bottom right;
    overflow: visible;
}

.menu-item {
    --final-rotation: 15deg;
    width: var(--menu-item-width-closed);
    height: var(--menu-item-height);
    background: rgba(240, 248, 255, 0.75); /* Snow blue white at 75% opacity */
    border-radius: 8px;
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.4),
        inset 0 -1px 2px rgba(0,0,0,0.1),
        0 2px 4px rgba(0,0,0,0.2);
    border: 1px solid rgba(200, 220, 255, 0.8); /* Light blue border */
    position: absolute;
    overflow: visible;
    transform-origin: right center;
    bottom: 0;
    right: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Initial state: rotated but at origin (no translation) */
    transform: rotate(var(--final-rotation)) translateX(0);
    z-index: 5;
}

/* Fixed rotation angles for reliability - scale naturally with responsive button size */
/* Rotation setup - keyframes handle the actual transform animation */
.menu-item:nth-child(1) { --final-rotation: 15deg; }
.menu-item:nth-child(2) { --final-rotation: 30deg; }
.menu-item:nth-child(3) { --final-rotation: 45deg; }
.menu-item:nth-child(4) { --final-rotation: 60deg; }

@media (max-width: 768px) {
    .menu-item:nth-child(1) { --final-rotation: 12deg; }
    .menu-item:nth-child(2) { --final-rotation: 24deg; }
    .menu-item:nth-child(3) { --final-rotation: 36deg; }
    .menu-item:nth-child(4) { --final-rotation: 48deg; }
}

@media (max-width: 480px) {
    .menu-item:nth-child(1) { --final-rotation: 10deg; }
    .menu-item:nth-child(2) { --final-rotation: 20deg; }
    .menu-item:nth-child(3) { --final-rotation: 30deg; }
    .menu-item:nth-child(4) { --final-rotation: 40deg; }
}

/* Horizontal/landscape view - make circle 10% smaller */
@media (orientation: landscape) and (max-height: 768px) {
    :root {
        --menu-button-size: clamp(90px, 10.8vw, 162px); /* 10% smaller */
    }
}

.menu-open .menu-item:nth-child(1) { animation-delay: 0s; }
.menu-open .menu-item:nth-child(2) { animation-delay: 0.15s; }
.menu-open .menu-item:nth-child(3) { animation-delay: 0.3s; }
.menu-open .menu-item:nth-child(4) { animation-delay: 0.45s; }

.menu-close .menu-item:nth-child(1) { animation-delay: 0.45s; }
.menu-close .menu-item:nth-child(2) { animation-delay: 0.3s; }
.menu-close .menu-item:nth-child(3) { animation-delay: 0.15s; }
.menu-close .menu-item:nth-child(4) { animation-delay: 0s; }

.menu-item::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 4px;
    background: 
        repeating-linear-gradient(
            90deg,
            #1a252f 0px,
            #1a252f 8px,
            transparent 8px,
            transparent 12px
        );
    box-shadow: 
        inset 0 1px 1px rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.1);
}

.menu-item::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    height: 4px;
    background: 
        repeating-linear-gradient(
            90deg,
            #1a252f 0px,
            #1a252f 8px,
            transparent 8px,
            transparent 12px
        );
    box-shadow: 
        inset 0 1px 1px rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.1);
}

.menu-text {
    position: absolute;
    top: 50%;
    left: 15px;
    right: 15px;
    transform: translateY(-50%);
    color: #000000; /* Black text for contrast */
    font-weight: bold;
    font-size: var(--menu-text-size);
    text-shadow: none; /* Remove text shadow */
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    z-index: 100;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rainbow collision lights for up to 12 menu items */
.collision-light {
    position: absolute;
    top: 50%;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: slowBlink 4s ease-in-out infinite;
    z-index: 200;
}

/* Rainbow color variations - 12 different colors */
.menu-item:nth-child(1) .collision-light {
    background: radial-gradient(circle, #ff4444 0%, #ff0000 40%, #cc0000 70%, #990000 100%);
    box-shadow: 
        0 0 8px #ff0000, 0 0 12px #ff0000,
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.4);
    animation-name: slowBlink-red;
}

.menu-item:nth-child(2) .collision-light {
    background: radial-gradient(circle, #ff8844 0%, #ff6600 40%, #cc5500 70%, #994400 100%);
    box-shadow: 
        0 0 8px #ff6600, 0 0 12px #ff6600,
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.4);
    animation-name: slowBlink-orange;
}

.menu-item:nth-child(3) .collision-light {
    background: radial-gradient(circle, #ffdd44 0%, #ffcc00 40%, #ccaa00 70%, #998800 100%);
    box-shadow: 
        0 0 8px #ffcc00, 0 0 12px #ffcc00,
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.4);
    animation-name: slowBlink-yellow;
}

.menu-item:nth-child(4) .collision-light {
    background: radial-gradient(circle, #88ff44 0%, #66ff00 40%, #55cc00 70%, #449900 100%);
    box-shadow: 
        0 0 8px #66ff00, 0 0 12px #66ff00,
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.4);
    animation-name: slowBlink-green;
}

.menu-item:nth-child(5) .collision-light {
    background: radial-gradient(circle, #44ffdd 0%, #00ffcc 40%, #00ccaa 70%, #009988 100%);
    box-shadow: 
        0 0 8px #00ffcc, 0 0 12px #00ffcc,
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.4);
    animation-name: slowBlink-cyan;
}

.menu-item:nth-child(6) .collision-light {
    background: radial-gradient(circle, #4488ff 0%, #0066ff 40%, #0055cc 70%, #004499 100%);
    box-shadow: 
        0 0 8px #0066ff, 0 0 12px #0066ff,
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.4);
    animation-name: slowBlink-blue;
}

.menu-item:nth-child(7) .collision-light {
    background: radial-gradient(circle, #8844ff 0%, #6600ff 40%, #5500cc 70%, #440099 100%);
    box-shadow: 
        0 0 8px #6600ff, 0 0 12px #6600ff,
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.4);
    animation-name: slowBlink-purple;
}

.menu-item:nth-child(8) .collision-light {
    background: radial-gradient(circle, #ff44dd 0%, #ff00cc 40%, #cc00aa 70%, #990088 100%);
    box-shadow: 
        0 0 8px #ff00cc, 0 0 12px #ff00cc,
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.4);
    animation-name: slowBlink-magenta;
}

.menu-item:nth-child(9) .collision-light {
    background: radial-gradient(circle, #ff4488 0%, #ff0066 40%, #cc0055 70%, #990044 100%);
    box-shadow: 
        0 0 8px #ff0066, 0 0 12px #ff0066,
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.4);
    animation-name: slowBlink-pink;
}

.menu-item:nth-child(10) .collision-light {
    background: radial-gradient(circle, #ffffff 0%, #cccccc 40%, #aaaaaa 70%, #888888 100%);
    box-shadow: 
        0 0 8px #cccccc, 0 0 12px #cccccc,
        inset 0 1px 1px rgba(255, 255, 255, 0.8),
        inset 0 -1px 1px rgba(0, 0, 0, 0.2);
    animation-name: slowBlink-white;
}

.menu-item:nth-child(11) .collision-light {
    background: radial-gradient(circle, #888888 0%, #666666 40%, #555555 70%, #444444 100%);
    box-shadow: 
        0 0 8px #666666, 0 0 12px #666666,
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        inset 0 -1px 1px rgba(0, 0, 0, 0.6);
    animation-name: slowBlink-gray;
}

.menu-item:nth-child(12) .collision-light {
    background: radial-gradient(circle, #ffaa44 0%, #ff8800 40%, #cc7700 70%, #996600 100%);
    box-shadow: 
        0 0 8px #ff8800, 0 0 12px #ff8800,
        inset 0 1px 1px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.4);
    animation-name: slowBlink-amber;
}

.menu-open .collision-light {
    opacity: 1;
}

/* Individual blink animations for each color */
@keyframes slowBlink-red {
    0%, 100% { 
        box-shadow: 0 0 6px #ff0000, 0 0 10px #ff0000, inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
        transform: translateY(-50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 3px #880000, 0 0 5px #880000, inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(0.95);
    }
}

@keyframes slowBlink-orange {
    0%, 100% { 
        box-shadow: 0 0 6px #ff6600, 0 0 10px #ff6600, inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
        transform: translateY(-50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 3px #884400, 0 0 5px #884400, inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(0.95);
    }
}

@keyframes slowBlink-yellow {
    0%, 100% { 
        box-shadow: 0 0 6px #ffcc00, 0 0 10px #ffcc00, inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
        transform: translateY(-50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 3px #998800, 0 0 5px #998800, inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(0.95);
    }
}

@keyframes slowBlink-green {
    0%, 100% { 
        box-shadow: 0 0 6px #66ff00, 0 0 10px #66ff00, inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
        transform: translateY(-50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 3px #449900, 0 0 5px #449900, inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(0.95);
    }
}

@keyframes slowBlink-cyan {
    0%, 100% { 
        box-shadow: 0 0 6px #00ffcc, 0 0 10px #00ffcc, inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
        transform: translateY(-50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 3px #009988, 0 0 5px #009988, inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(0.95);
    }
}

@keyframes slowBlink-blue {
    0%, 100% { 
        box-shadow: 0 0 6px #0066ff, 0 0 10px #0066ff, inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
        transform: translateY(-50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 3px #004499, 0 0 5px #004499, inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(0.95);
    }
}

@keyframes slowBlink-purple {
    0%, 100% { 
        box-shadow: 0 0 6px #6600ff, 0 0 10px #6600ff, inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
        transform: translateY(-50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 3px #440099, 0 0 5px #440099, inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(0.95);
    }
}

@keyframes slowBlink-magenta {
    0%, 100% { 
        box-shadow: 0 0 6px #ff00cc, 0 0 10px #ff00cc, inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
        transform: translateY(-50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 3px #990088, 0 0 5px #990088, inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(0.95);
    }
}

@keyframes slowBlink-pink {
    0%, 100% { 
        box-shadow: 0 0 6px #ff0066, 0 0 10px #ff0066, inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
        transform: translateY(-50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 3px #990044, 0 0 5px #990044, inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(0.95);
    }
}

@keyframes slowBlink-white {
    0%, 100% { 
        box-shadow: 0 0 6px #cccccc, 0 0 10px #cccccc, inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 3px #888888, 0 0 5px #888888, inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
        transform: translateY(-50%) scale(0.95);
    }
}

@keyframes slowBlink-gray {
    0%, 100% { 
        box-shadow: 0 0 6px #666666, 0 0 10px #666666, inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.6);
        transform: translateY(-50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 3px #444444, 0 0 5px #444444, inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
        transform: translateY(-50%) scale(0.95);
    }
}

@keyframes slowBlink-amber {
    0%, 100% { 
        box-shadow: 0 0 6px #ff8800, 0 0 10px #ff8800, inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
        transform: translateY(-50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 3px #996600, 0 0 5px #996600, inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
        transform: translateY(-50%) scale(0.95);
    }
}

.menu-open .menu-item {
    animation: slideOutRadial var(--animation-duration-open) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: auto;
    transform: rotate(var(--final-rotation)) translateX(calc(var(--menu-button-size) * 0.18));
}

.menu-close .menu-item {
    animation: slideInRadial var(--animation-duration-close) cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
    pointer-events: none;
    width: var(--menu-item-width-open);
    opacity: 1;
    transform: rotate(var(--final-rotation)) translateX(calc(var(--menu-button-size) * 0.18));
}

.menu-close .menu-text {
    opacity: 1;
    transition: none;
}

/* Enhanced touch feedback */
.circle-button:active {
    background: 
        radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.3), transparent 50%),
        linear-gradient(135deg, #e9ecef 0%, #dee2e6 20%, #d1d8dd 40%, #2c3e50 100%);
    transform: scale(0.96);
    box-shadow: 
        inset 0 6px 12px rgba(0,0,0,0.5),
        inset 0 -2px 4px rgba(255,255,255,0.1),
        0 3px 10px rgba(0,0,0,0.3);
}

/* Enhanced touch feedback - now preserves rotation */
.menu-item:active {
    background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
    transform: rotate(var(--final-rotation)) translateX(calc(var(--menu-button-size) * 0.18)) scale(0.98);
    box-shadow: 
        inset 0 2px 8px rgba(0,0,0,0.4),
        inset 0 -1px 2px rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.2);
}

.menu-open .menu-text {
    opacity: 1;
}

/* Opening animation - smooth radial slide out (from right) */
@keyframes slideOutRadial {
    0% {
        width: var(--menu-item-width-closed);
        opacity: 0;
        transform: rotate(var(--final-rotation)) translateX(0);
    }
    60% {
        opacity: 0.8;
        transform: rotate(var(--final-rotation)) translateX(calc(var(--menu-button-size) * 0.12));
    }
    100% {
        width: var(--menu-item-width-open);
        opacity: 1;
        transform: rotate(var(--final-rotation)) translateX(calc(var(--menu-button-size) * 0.18));
    }
}

/* Closing animation - smooth radial slide in (to right) */
@keyframes slideInRadial {
    0% {
        width: var(--menu-item-width-open);
        opacity: 1;
        transform: rotate(var(--final-rotation)) translateX(calc(var(--menu-button-size) * 0.18));
    }
    50% {
        opacity: 0.6;
        transform: rotate(var(--final-rotation)) translateX(calc(var(--menu-button-size) * 0.08));
    }
    100% {
        width: var(--menu-item-width-closed);
        opacity: 0;
        transform: rotate(var(--final-rotation)) translateX(0);
    }
}

.menu-item:hover {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    transition: all 0.2s ease;
}



.menu-item:hover .menu-text {
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .menu-open .menu-item {
        animation-duration: 0.3s;
    }
    
    .menu-close .menu-item {
        animation-duration: 0.2s;
    }
    
    .circle-button {
        transition: none;
    }
    
    .menu-item:hover {
        transition: none;
    }
}

/* Font classes */
.orbitron-light { font-family: 'Orbitron', monospace; font-weight: 300; font-size: 1.3rem; }
.orbitron-regular { font-family: 'Orbitron', monospace; font-weight: 400; font-size: 1.2rem; }
.orbitron-bold { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 1.1rem; }
.orbitron-black { font-family: 'Orbitron', monospace; font-weight: 900; font-size: 1.1rem; }

.space-mono-regular { font-family: 'Space Mono', monospace; font-weight: 400; font-size: 1rem; }
.space-mono-bold { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 1rem; }

.exo-thin { font-family: 'Exo 2', sans-serif; font-weight: 100; font-size: 1.3rem; }
.exo-regular { font-family: 'Exo 2', sans-serif; font-weight: 400; font-size: 1.2rem; }
.exo-semibold { font-family: 'Exo 2', sans-serif; font-weight: 600; font-size: 1.1rem; }
.exo-black { font-family: 'Exo 2', sans-serif; font-weight: 900; font-size: 1.1rem; }

.rajdhani-light { font-family: 'Rajdhani', sans-serif; font-weight: 300; font-size: 1.1rem; }
.rajdhani-regular { font-family: 'Rajdhani', sans-serif; font-weight: 400; font-size: 1.1rem; }
.rajdhani-semibold { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 1.1rem; }
.rajdhani-bold { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.1rem; }

electrolize { font-family: 'Electrolize', sans-serif; font-weight: 400; font-size: 1.1rem; }
.audiowide { font-family: 'Audiowide', cursive; font-weight: 400; font-size: 1.2rem; }
@keyframes rotateRainbow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}