:root {
    /* More colorful, musical-themed color palette */
    --primary-purple: #6a0dad;
    --primary-blue: #1e88e5;
    --primary-red: #e53935;
    --primary-green: #43a047;
    --primary-yellow: #fdd835;
    --primary-orange: #fb8c00;
    
    --accent-pink: #ec407a;
    --accent-teal: #26a69a;
    --accent-indigo: #3949ab;
    
    --background-dark: #2c003e;
    --background-light: #4a148c;
    
    --text-light: #ffffff;
    --text-dark: #212121;
    
    /* Musical theme colors */
    --music-note-gold: #ffd700;
    --vinyl-black: #121212;
    --vinyl-grooves: #333333;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--background-dark);
    font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: var(--text-light);
    background-image: linear-gradient(45deg, var(--background-dark), var(--background-light));
}

.jukebox-container {
    width: 95%;
    max-width: 500px; /* Narrower for portrait mode */
    height: auto;
    /* Reduced height by 20% from 800px to 640px */
    min-height: 640px;
    background: linear-gradient(to bottom, var(--primary-purple), var(--background-dark));
    /* Enhanced 3D appearance */
    border-radius: 40px;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.8),
        inset 0 2px 10px rgba(255, 255, 255, 0.5),
        inset 0 -5px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Reduced padding to save vertical space */
    padding: 15px;
    /* Enhanced 3D border */
    border: 10px solid var(--accent-indigo);
    border-bottom-width: 15px;
    border-top-width: 5px;
    /* 3D device appearance */
    transform-style: preserve-3d;
    perspective: 1000px;
    transform: rotateX(5deg);
}

/* 3D device edges */
.jukebox-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: transparent;
    border-radius: 42px;
    box-shadow: 
        inset 0 2px 5px rgba(255, 255, 255, 0.5),
        inset 0 -5px 15px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    z-index: 10;
}

.jukebox-header {
    width: 100%;
    text-align: center;
    /* Reduced margin to save vertical space */
    margin-bottom: 10px;
    position: relative;
}

.jukebox-title {
    font-size: 38px; /* Reduced from 42px */
    font-weight: bold;
    color: var(--music-note-gold);
    text-shadow: 
        0 0 10px var(--music-note-gold), 
        0 0 20px var(--primary-yellow),
        0 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 5px 0; /* Reduced from 10px */
    letter-spacing: 2px;
    animation: neonFlicker 2s infinite alternate;
    /* 3D text effect */
    transform: translateZ(10px);
}

.song-display {
    width: 90%;
    /* Reduced height to save vertical space */
    height: 150px;
    background-color: var(--vinyl-black);
    border-radius: 20px;
    /* Enhanced 3D appearance */
    border: 8px solid var(--accent-teal);
    border-bottom-width: 12px;
    border-top-width: 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Reduced margin to save vertical space */
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 
        inset 0 0 20px rgba(0, 0, 0, 0.8),
        0 5px 15px rgba(0, 0, 0, 0.5);
    /* 3D screen appearance */
    transform-style: preserve-3d;
    transform: translateZ(5px);
}

/* Screen reflection overlay */
.song-display::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.15), 
        rgba(255, 255, 255, 0.05), 
        transparent);
    pointer-events: none;
    border-radius: 12px 12px 0 0;
}

.decade-label {
    font-size: 26px; /* Reduced from 28px */
    font-weight: bold;
    color: var(--accent-pink);
    text-shadow: 0 0 5px var(--accent-pink);
    margin-bottom: 5px; /* Reduced from 10px */
    /* 3D text effect */
    transform: translateZ(5px);
}

.song-label {
    font-size: 20px; /* Reduced from 22px */
    font-weight: bold;
    color: var(--text-light);
    text-align: center;
    padding: 0 20px;
    /* 3D text effect */
    transform: translateZ(5px);
}

/* Style for clickable song label */
.clickable-song {
    text-decoration: underline;
    color: var(--music-note-gold);
    transition: all 0.2s ease;
}

.clickable-song:hover {
    color: var(--primary-yellow);
    text-shadow: 0 0 8px var(--primary-yellow);
}

.decade-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons vertically for portrait mode */
    align-items: center;
    /* Reduced gap to save vertical space */
    gap: 8px;
    width: 90%;
    /* Reduced margin to save vertical space */
    margin-bottom: 15px;
}

.decade-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.decade-button {
    /* Increased width by 75% from 84px to 147px */
    width: 147px;
    height: 56px;
    /* Enhanced 3D appearance */
    background: linear-gradient(to bottom, var(--primary-blue), var(--accent-indigo));
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-light);
    cursor: pointer;
    /* Enhanced 3D shadow */
    box-shadow: 
        0 6px 0 rgba(0, 0, 0, 0.3),
        inset 0 2px 3px rgba(255, 255, 255, 0.5),
        inset 0 -2px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.1s;
    position: relative;
    overflow: hidden;
    /* Enhanced 3D border */
    border: 2px solid var(--accent-teal);
    border-bottom-width: 4px;
    border-top-width: 1px;
    user-select: none;
    /* 3D button appearance */
    transform-style: preserve-3d;
    transform: translateZ(5px);
}

/* Colorful decade buttons */
.decade-button[data-decade="1950s"] {
    background: linear-gradient(to bottom, #9c27b0, #7b1fa2);
}
.decade-button[data-decade="1960s"] {
    background: linear-gradient(to bottom, #e91e63, #c2185b);
}
.decade-button[data-decade="1970s"] {
    background: linear-gradient(to bottom, #f44336, #d32f2f);
}
.decade-button[data-decade="1980s"] {
    background: linear-gradient(to bottom, #ff9800, #f57c00);
}
.decade-button[data-decade="1990s"] {
    background: linear-gradient(to bottom, #ffc107, #ffa000);
}
.decade-button[data-decade="2000s"] {
    background: linear-gradient(to bottom, #4caf50, #388e3c);
}
.decade-button[data-decade="2010s"] {
    background: linear-gradient(to bottom, #2196f3, #1976d2);
}
.decade-button[data-decade="2020s"] {
    background: linear-gradient(to bottom, #3f51b5, #303f9f);
}

.decade-button:hover {
    transform: translateY(2px) translateZ(5px);
    box-shadow: 
        0 4px 0 rgba(0, 0, 0, 0.3),
        inset 0 2px 3px rgba(255, 255, 255, 0.5),
        inset 0 -2px 3px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

.decade-button:active, .decade-button.active {
    transform: translateY(6px) translateZ(2px);
    box-shadow: 
        0 0 0 rgba(0, 0, 0, 0.3),
        inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

.decade-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px 10px 0 0;
}

.decade-button.selected {
    /* Keep original color but make 20% brighter */
    filter: brightness(1.2);
    color: white;
    border-color: var(--music-note-gold);
    box-shadow: 
        0 6px 0 rgba(0, 0, 0, 0.3),
        inset 0 2px 3px rgba(255, 255, 255, 0.5),
        inset 0 -2px 3px rgba(0, 0, 0, 0.3),
        0 0 10px var(--music-note-gold);
}

.spin-button {
    /* Reduced size to save vertical space */
    width: 130px;
    height: 130px;
    /* Enhanced 3D appearance */
    background: radial-gradient(circle, var(--primary-red), #b71c1c);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px; /* Reduced from 32px */
    font-weight: bold;
    color: white;
    cursor: pointer;
    /* Enhanced 3D shadow */
    box-shadow: 
        0 12px 0 rgba(0, 0, 0, 0.3), 
        0 0 20px rgba(255, 0, 0, 0.5),
        inset 0 5px 10px rgba(255, 255, 255, 0.3),
        inset 0 -5px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.1s;
    position: relative;
    /* Enhanced 3D border */
    border: 8px solid var(--music-note-gold);
    border-bottom-width: 10px;
    border-top-width: 6px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    user-select: none;
    /* Reduced margin to save vertical space */
    margin: 10px 0;
    /* 3D button appearance */
    transform-style: preserve-3d;
    transform: translateZ(10px);
}

.spin-button:hover {
    transform: translateY(5px) translateZ(10px);
    box-shadow: 
        0 7px 0 rgba(0, 0, 0, 0.3), 
        0 0 20px rgba(255, 0, 0, 0.5),
        inset 0 5px 10px rgba(255, 255, 255, 0.3),
        inset 0 -5px 10px rgba(0, 0, 0, 0.5);
}

.spin-button:active {
    transform: translateY(12px) translateZ(5px);
    box-shadow: 
        0 0 0 rgba(0, 0, 0, 0.3), 
        0 0 20px rgba(255, 0, 0, 0.5),
        inset 0 5px 10px rgba(0, 0, 0, 0.5);
}

.spin-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50% 50% 0 0;
}

.player-controls {
    width: 90%;
    /* Enhanced 3D appearance */
    background-color: var(--accent-indigo);
    border-radius: 15px;
    /* Reduced padding to save vertical space */
    padding: 10px;
    /* Reduced margin to save vertical space */
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Enhanced 3D border */
    border: 5px solid var(--accent-teal);
    border-bottom-width: 7px;
    border-top-width: 3px;
    /* 3D panel appearance */
    box-shadow: 
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 2px 5px rgba(255, 255, 255, 0.2);
    transform-style: preserve-3d;
    transform: translateZ(5px);
}

.player-toggle {
    display: flex;
    margin-bottom: 10px; /* Reduced from 15px */
}

.player-toggle-button {
    padding: 8px 15px; /* Reduced from 10px 20px */
    /* Enhanced 3D appearance */
    background-color: var(--primary-purple);
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    /* 3D button appearance */
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        inset 0 -2px 3px rgba(0, 0, 0, 0.3);
}

.player-toggle-button:first-child {
    border-radius: 10px 0 0 10px;
}

.player-toggle-button:last-child {
    border-radius: 0 10px 10px 0;
}

.player-toggle-button.active {
    background-color: var(--primary-green);
    /* Enhanced active state */
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.3);
}

.player-frame {
    width: 100%;
    /* Reduced height to save vertical space */
    height: 70px;
    /* Enhanced 3D appearance */
    background-color: var(--vinyl-black);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: relative;
    /* 3D screen appearance */
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.5),
        0 2px 3px rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

/* Style for clickable player frame */
.clickable-player {
    cursor: pointer !important;
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.5),
        0 0 10px var(--music-note-gold);
}

.clickable-player:hover {
    transform: translateY(-2px);
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.5),
        0 0 15px var(--music-note-gold);
}

.clickable-player:active {
    transform: translateY(2px);
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.5),
        0 0 5px var(--music-note-gold);
}

/* Animation for player change */
.player-changed {
    animation: playerChangeFlash 0.5s ease;
}

@keyframes playerChangeFlash {
    0% {
        box-shadow: 
            inset 0 2px 5px rgba(0, 0, 0, 0.5),
            0 0 5px var(--music-note-gold);
    }
    50% {
        box-shadow: 
            inset 0 2px 5px rgba(0, 0, 0, 0.5),
            0 0 20px var(--music-note-gold);
    }
    100% {
        box-shadow: 
            inset 0 2px 5px rgba(0, 0, 0, 0.5),
            0 0 5px var(--music-note-gold);
    }
}

#player-message {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

#youtube-player, #spotify-player {
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Removed flashing LED lights and musical decorations as requested */

/* Slot machine style spinner - enlarged to fill selection window */
.slot-machine {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    background-color: rgba(0, 0, 0, 0.7);
}

.slot-machine.active {
    opacity: 1;
}

.slot-reel {
    position: relative;
    width: 95%;
    height: 80px; /* Increased height */
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    box-shadow: 
        inset 0 0 15px rgba(0, 0, 0, 0.8),
        0 0 10px var(--primary-purple);
}

.slot-items {
    position: absolute;
    width: 100%;
    transition: top 0.1s linear;
}

.slot-item {
    height: 80px; /* Increased height */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-light);
    font-weight: bold;
    font-size: 22px; /* Increased font size */
    text-shadow: 0 0 8px var(--accent-pink);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    padding: 0 15px;
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg) translateZ(15px);
    }
    100% {
        transform: translateY(-10px) rotate(10deg) translateZ(25px);
    }
}

@keyframes lightFlash {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

@keyframes neonFlicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow: 
            0 0 10px var(--music-note-gold), 
            0 0 20px var(--primary-yellow),
            0 2px 4px rgba(0, 0, 0, 0.5);
    }
    20%, 24%, 55% {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
}

/* Spinning animation */
@keyframes spinAnimation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spinning {
    animation: spinAnimation 0.5s linear;
}

/* Slot machine spinning animation */
@keyframes slotSpin {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-1000px);
    }
}

/* Player link styling */
.player-link-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.player-link {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    /* Enhanced 3D appearance */
    background-color: var(--primary-purple);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    /* 3D button appearance */
    box-shadow: 
        0 3px 5px rgba(0, 0, 0, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.3);
}

.player-link:hover {
    background-color: var(--accent-indigo);
}

.youtube-link {
    background-color: #c4302b; /* YouTube red */
}

.youtube-link:hover {
    background-color: #e62117; /* Brighter YouTube red */
}

.spotify-link {
    background-color: #1DB954; /* Spotify green */
}

.spotify-link:hover {
    background-color: #1ed760; /* Brighter Spotify green */
}

.player-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

@media (max-width: 500px) {
    .jukebox-container {
        width: 95%;
        padding: 15px;
        min-height: 600px; /* Further reduced for mobile */
    }
    
    .jukebox-title {
        font-size: 32px;
    }
    
    .decade-buttons {
        gap: 8px;
    }
    
    .decade-button {
        width: 120px; /* Still wider than original but adjusted for mobile */
        height: 45px;
        font-size: 14px;
    }
    
    .spin-button {
        width: 120px;
        height: 120px;
        font-size: 26px;
    }
}