/* Tony Tones Master Styles */
:root {
    --nick-orange: #ff8000;
    --slime-green: #32ff00;
    --electric-blue: #00f2ff;
    --hot-pink: #ff00ff;
}

body {
    background-color: #4b0082;
    background-image: radial-gradient(var(--nick-orange) 2px, transparent 2px);
    background-size: 40px 40px;
    font-family: 'Comic Sans MS', cursive;
    text-align: center;
    color: white;
}

#tony-app {
    border: 10px solid var(--slime-green);
    border-radius: 50px;
    background: rgba(0,0,0,0.9);
    display: inline-block;
    padding: 25px;
    box-shadow: 0 0 40px var(--slime-green);
    transform: rotate(1deg);
}

.cell {
    width: 42px;
    height: 42px;
    background: #333;
    border-radius: 8px;
    border: 2px solid #555;
    transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Row-specific active colors for a rainbow effect */
.row-0.active, .row-1.active { background: var(--hot-pink); box-shadow: 0 0 15px var(--hot-pink); }
.row-2.active, .row-3.active { background: var(--nick-orange); box-shadow: 0 0 15px var(--nick-orange); }
.row-4.active, .row-5.active { background: var(--slime-green); box-shadow: 0 0 15px var(--slime-green); }
.row-6.active, .row-7.active { background: var(--electric-blue); box-shadow: 0 0 15px var(--electric-blue); }

/* Drum Row Styling */
.row-drum { background: #222; border: 2px dashed #666; }
.row-drum.active { 
    background: white !important; 
    box-shadow: 0 0 20px white;
}

button {
    background: var(--nick-orange);
    border: 4px solid white;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}

button:active { transform: scale(0.9); }