/* Reset and base */
body {
    margin: 0;
    padding: 0;
    font-family: 'Trebuchet MS', sans-serif;
    background: linear-gradient(135deg, #2f2f2f, #4d4d4d);
    color: #f0e6d2;
    text-align: center;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* remove scrollbars */
}

/* State: locked (audio not activated) - red / alert */
body.locked {
    background: radial-gradient(circle at 10% 20%, #3b0b0b, #1a0a0a 40%), linear-gradient(135deg, #2b0000, #3d0000);
    color: #ffe6e6;
}

body.locked #status {
    color: #ffd6d6;
    text-shadow: 0 0 12px rgba(255,0,0,0.5);
}

body.locked button {
    box-shadow: 0 0 18px rgba(255, 40, 40, 0.6), 0 0 30px rgba(255, 100, 100, 0.2) inset;
    background: linear-gradient(145deg, #440000, #6b0000);
}

body.locked button::after {
    background: radial-gradient(circle, rgba(255,50,50,0.25) 0%, transparent 60%);
    animation: heartbeat 1.6s infinite;
}

/* State: ready (audio activated) - green / go */
body.ready {
    background: radial-gradient(circle at 90% 80%, #052012, #00120a 30%), linear-gradient(135deg, #013220, #054025);
    color: #eaffef;
}

body.ready #status {
    color: #e6ffef;
    text-shadow: 0 0 12px rgba(0,255,120,0.35);
}

body.ready button {
    box-shadow: 0 0 20px rgba(0, 220, 120, 0.6), 0 0 30px rgba(0, 180, 90, 0.2) inset;
    background: linear-gradient(145deg, #0a3b2a, #0f7a52);
}

body.ready button::after {
    background: radial-gradient(circle, rgba(0,255,140,0.2) 0%, transparent 60%);
    animation: floatGlow 3s infinite;
}

/* Shared animations */
@keyframes sparkle {
    0% { opacity: 0.6; transform: scale(1) translateY(0);} 
    50% { opacity: 1; transform: scale(1.05) translateY(-3px);} 
    100% { opacity: 0.6; transform: scale(1) translateY(0);} 
}

@keyframes heartbeat {
    0% { transform: scale(1); opacity: 0.7 }
    30% { transform: scale(1.06); opacity: 1 }
    60% { transform: scale(0.98); opacity: 0.85 }
    100% { transform: scale(1); opacity: 0.7 }
}

@keyframes floatGlow {
    0% { transform: translateY(0) scale(1); opacity: 0.7 }
    50% { transform: translateY(-6px) scale(1.04); opacity: 1 }
    100% { transform: translateY(0) scale(1); opacity: 0.7 }
}

/* Controls styling */
.controls {
    margin-bottom: 1rem;
}

#volume {
    width: 320px;
    margin-left: 0.5rem;
}

#volumeLabel {
    font-weight: 700;
    margin-left: 0.5rem;
}

/* Title */
h1 {
    font-size: 4rem;
    text-shadow: 0 0 10px #ffa500, 0 0 20px #ff8c00;
    margin-bottom: 1rem;
}

/* Status message */
#status {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-shadow: 0 0 5px #ff8c00;
}

/* Button style */
button {
    background: linear-gradient(145deg, #333333, #555555);
    border: none;
    border-radius: 25px;
    padding: 15px 40px;
    font-size: 1.5rem;
    color: #f0e6d2;
    cursor: pointer;
    box-shadow: 0 0 10px #ff8c00, 0 0 20px #ffa500 inset;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

/* Hover effect */
button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px #ffb347, 0 0 40px #ffa500 inset;
}

/* Disabled button */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Magic sparkle around button */
button::after {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    background: radial-gradient(circle, rgba(255,165,0,0.4) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: sparkle 2s infinite;
}