@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #000;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a; 
}

::-webkit-scrollbar-thumb {
    background: #333; 
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.product-card:hover {
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.3);
}

.wheel-container {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    background: conic-gradient(
        #eab308 0deg 72deg,   
        #ef4444 72deg 144deg,  
        #3b82f6 144deg 216deg, 
        #a855f7 216deg 288deg, 
        #6b7280 288deg 360deg  
    );
    transition: transform 5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.wheel-label {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 2px;
    transform-origin: 0 0;
    text-align: right;
    padding-right: 15px;
    font-size: 10px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.product-tab {
    opacity: 0.6; 
    filter: grayscale(100%); 
    transition: all 0.3s ease; 
}

.product-tab:hover {
    opacity: 0.8; 
    transform: translateY(-2px); 
}

.product-tab.active {
    opacity: 1; 
    filter: grayscale(0%); 
    background: linear-gradient(to right, rgba(168, 85, 247, 0.15), rgba(0,0,0,0));
    border-color: #a855f7; 
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.25); 
}

.product-tab.active .text-gray-500 {
    color: #e5e7eb !important;
}

* {
    -webkit-tap-highlight-color: transparent; 
}

html {
    scroll-behavior: smooth;
}

button:active, 
.product-tab:active, 
.cursor-pointer:active,
a:active {
    transform: scale(0.96) !important; 
    transition: transform 0.05s ease-out; 
    opacity: 0.9;
}