/* Custom 1960s RadioShack Styling */

.digital-display {
    text-shadow: 0 0 10px currentColor;
}

.clock-housing {
    background: 
        linear-gradient(135deg, 
            #d97706 0%, 
            #92400e 25%, 
            #78350f 50%, 
            #92400e 75%, 
            #d97706 100%),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,0.1) 2px,
            rgba(0,0,0,0.1) 4px
        );
    box-shadow: 
        inset 0 0 20px rgba(0,0,0,0.3),
        0 10px 30px rgba(0,0,0,0.5),
        0 0 0 2px #92400e,
        0 0 0 4px #d97706;
}

.retro-button {
    background: 
        linear-gradient(145deg, #374151, #1f2937);
    box-shadow: 
        inset 0 2px 4px rgba(255,255,255,0.1),
        inset 0 -2px 4px rgba(0,0,0,0.3),
        0 4px 8px rgba(0,0,0,0.3);
    border: 1px solid #4b5563;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.retro-button:hover {
    background: 
        linear-gradient(145deg, #4b5563, #374151);
}

.retro-button:active {
    box-shadow: 
        inset 0 4px 8px rgba(0,0,0,0.3),
        0 2px 4px rgba(0,0,0,0.3);
}

/* Space Age Mode */
.space-mode {
    background: 
        radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f23 100%);
    animation: cosmic-pulse 4s ease-in-out infinite;
}

.space-mode .clock-housing {
    background: 
        linear-gradient(135deg, 
            #1a1a2e 0%, 
            #16213e 25%, 
            #0f0f23 50%, 
            #16213e 75%, 
            #1a1a2e 100%);
    box-shadow: 
        0 0 50px rgba(0, 255, 255, 0.3),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
    border-color: #00ffff;
}

.space-mode .digital-display {
    text-shadow: 
        0 0 20px #00ffff,
        0 0 40px #00ffff,
        0 0 60px #00ffff;
}

@keyframes cosmic-pulse {
    0%, 100% { 
        background: radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f23 100%);
    }
    50% { 
        background: radial-gradient(ellipse at center, #16213e 0%, #1a1a2e 100%);
    }
}

/* Flickering effect */
@keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .clock-housing {
        width: 95% !important;
        min-height: auto !important;
        padding: 1rem !important;
    }
    
    .digital-display {
        font-size: 2.5rem !important;
        letter-spacing: 2px !important;
    }
    
    .grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
}

/* Wood grain texture effect */
.clock-housing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(0,0,0,0.05) 3px,
            rgba(0,0,0,0.05) 6px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 50px,
            rgba(139, 69, 19, 0.1) 50px,
            rgba(139, 69, 19, 0.1) 51px
        );
    border-radius: inherit;
    pointer-events: none;
}

/* Chrome accent styling */
.retro-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    border-radius: inherit;
}