/* Import Google Font (if you chose the @import method) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    /* Layout: Enable Flexbox to center content and control footer */
    display: flex;
    flex-direction: column; 
    min-height: 100vh;      /* Body takes full viewport height */
    margin: 0;              /* Remove default margin */
    font-family: 'Roboto', sans-serif;
    color: white;
    
    /* Background Image Styling */
    background-image: url(kanebackground.png);
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-color: black; /* Fallback color */
}

body.no-background {
    background-image: none !important; /* Forces background off */
    background-color: white !important; /* Ensures it reverts to a solid color */
}

header {
    /* Ensure the header does not interfere with the vertical centering of main */
    width: 100%; 
    padding-top: 20px;
}

main {
    /* Main content should take up the middle space and center its children */
    display: flex;
    flex-direction: column;
    align-items: center; 
    flex-grow: 1; /* Allows the main area to take up all available vertical space */
    justify-content: flex-start; /* Aligns content to the top of the main area */
}

footer {
    background-color: #232323;
    color: rgb(190, 190, 190);
    height: 50px;
    text-align: center;
    padding-top: 15px;
    width: 100%;
    margin-top: auto; 
}

/* Container for Header Buttons */
.button-container {
    display: flex; 
    justify-content: center; /* Centers the group of buttons */
    gap: 30px; 
    padding: 20px 0;
    touch-action: manipulation;
}

/* FIX: Refactored Normal Button styles to use the new class */
.normal-btn {
    width: 100px;
    height: 50px;
    
    background-color: white;
    color: black; /* Added for visible text */
    border: 2px solid black;
    border-radius: 10px;
    
    /* Use flex for text centering inside the button */
    display: flex; 
    justify-content: center;
    align-items: center;
    
    padding: 10px 15px;
    text-decoration: none;
    cursor: pointer; 
    touch-action: manipulation;
}

.normal-btn:hover {
    background-color: rgb(217, 216, 216);
    border-color: rgb(94, 93, 93);
}

.normal-btn:active {
    transform: translateY(1.5px);
    background-color: rgb(143, 143, 143);
    border-color: rgb(105, 104, 104);
}

#soundButton {
    /* Sizing is now handled by the image inside */
    width: fit-content;
    height: fit-content;
    
    background-color: transparent;
    padding: 0; /* Remove padding */
    border: none; /* Remove border */
    cursor: pointer; 
    transition: transform 0.1s ease;
    touch-action: manipulation;
}

#soundButton:active {
    transform: translateY(5px);
}

#soundButton img {
    /* Apply styles to the image inside the button */
    max-width: 200px; /* Example size */
    height: auto;   
    display: block; 
    margin: 0; 
    border-radius: 50%; /* Changed to 50% to ensure perfect circle */
    
    /* Shadow that conforms to the image shape */
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7)); 
    transition: filter 0.3s ease;
}

/* Counter display */
.textBox1 {
    text-align: center;
    color: black; 
    font-size: 40px;
    margin-top: 10px;
}

/* Achievement Styling (Optional) */
#achievementLog {
    margin-top: 20px;
}

.achievement-notification {
    background-color: #333;
    color: white;
    padding: 10px;
    margin-bottom: 5px;
    border-left: 5px solid #4CAF50;
    border-radius: 4px;
    opacity: 0.9;
    font-size: 1em;
}

#mySound {
    display: none;
}