/* --- Basic Styles --- */
body { 
    margin: 0; 
    overflow: hidden; 
    background: black; 
    color: white; 
    font-family: Arial, sans-serif; 
}

canvas { 
    display: block; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: -1; 
}

video { 
    display: none; /* Hide the original video element */
}

/* --- Text Displays --- */
#timeDisplay, #fpsDisplay, #screensDisplay, #passesDisplay {
    flex: 0 0 auto; 
    font-size: 0.9em; 
    min-width: 50px; 
    color: #ccc; 
    white-space: nowrap; 
    text-align: center;
}

#screensDisplay span, #passesDisplay span { 
    display: inline-block; 
}

/* --- Number Input Styles --- */
.floating-controls input[type="number"] {
    background: rgba(40, 45, 65, 0.7); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white; 
    border-radius: 5px; 
    padding: 2px 4px; 
    text-align: center;
    -moz-appearance: textfield;
}

.floating-controls input[type="number"]::-webkit-inner-spin-button,
.floating-controls input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; 
    margin: 0;
}