/* General styles */
* {
    padding: 0;
    margin: 0;
    font-family: "Orbitron", sans-serif;
    user-select: none;
    color: rgb(255, 255, 255);
    box-sizing: border-box; /* Ensures padding and borders are included in the element's total width and height */
}

body {
    background: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* Header and Navigation */
header {
    width: 100%;
    text-align: center;
    font-size: clamp(1.5rem, 5vw, 3rem); /* Responsive font size */
    margin-bottom: 20px;
    margin-top: 10px;
}

#la {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 10px 15px;
    border-radius: 50%;
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-decoration: none;
    color: white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: transform 0.3s;
    z-index: 10; /* Ensure it stays on top */
}

#la:hover {
    transform: scale(1.1);
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px; /* Space between elements in nav */
    margin-bottom: 20px;
    max-width: 1000px; /* Limit nav width for better desktop appearance */
}

#p1, #p2 {
    flex-grow: 1; /* Allows them to grow and fill available space */
    font-size: clamp(2rem, 8vw, 5rem);
    background-color: white;
    color: black;
    padding: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

#p1 {
    border-right: 5px solid black; /* Change border color to black for better contrast */
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#p2 {
    border-left: 5px solid black;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

#l1, #l2 {
    width: clamp(30px, 8vw, 60px); /* Responsive width */
    height: auto;
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.3s;
}

#l1:hover, #l2:hover {
    transform: scale(1.1);
}

/* Main Content Section */
section {
    display: grid;
    grid-template-areas:
        "score1   time   score2"
        "minus1   .      minus2"
        "plus1    periodo  plus2"
        ".        controls ."
    ;
    grid-template-columns: 1fr 1.5fr 1fr; /* Adjust column widths */
    gap: 10px;
    width: 100%;
    max-width: 1000px; /* Limit section width by default (mobile/tablet) */
    padding: 10px;
    align-items: center; /* Vertically center items in their grid cells */
    justify-items: center; /* Horizontally center items in their grid cells */
}

/* Score displays */
#o1, #o3 {
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 5px white;
    color: rgb(240, 107, 30);
    aspect-ratio: 1 / 1; /* Makes the containers square */
    border-radius: 20px;
    font-size: clamp(3rem, 15vw, 10rem);
    padding: 10px; /* Add some padding to prevent text touching borders */
    overflow: hidden; /* Hide overflow if score is too big */
}

#o1 { grid-area: score1; }
#o3 { grid-area: score2; }

/* Timer */
#o5 {
    grid-area: time;
    font-size: clamp(3rem, 15vw, 12rem);
    color: red;
    text-align: center;
    align-self: center; /* Center vertically within its grid area */
    justify-self: center; /* Center horizontally within its grid area */
}

/* Score buttons */
.sb { /* Apply common styles to all score buttons */
    background-color: white;
    color: black;
    border: none;
    padding: 10px;
    font-size: clamp(1rem, 5vw, 2.5rem);
    font-weight: bolder;
    border-radius: 50%;
    width: clamp(40px, 8vw, 60px);
    height: clamp(40px, 8vw, 60px);
    display: flex; /* Use flex to center the +/- sign */
    justify-content: center;
    align-items: center;
    transition: transform 0.2s;
    cursor: pointer;
}

.sb:hover {
    transform: scale(1.1);
}

/* Specific button placement in grid */
#q2 { grid-area: minus1; } /* Equipo 1: Minus */
#q1 { grid-area: plus1; }  /* Equipo 1: Plus */
#q4 { grid-area: minus2; } /* Equipo 2: Minus (Assuming q4 is minus for team 2) */
#q3 { grid-area: plus2; }  /* Equipo 2: Plus (Assuming q3 is plus for team 2) */


/* Period display */
#o2 {
    grid-area: periodo;
    text-align: center;
    font-size: clamp(1.5rem, 5vw, 3rem);
    margin-top: 10px;
    align-self: start; /* Align to the start of its grid cell */
}

#pt1 {
    color: rgb(0, 255, 0);
    font-size: clamp(2rem, 8vw, 4rem);
}

/* Controls (Play, Stop, etc.) Container */
.controls-container {
    grid-area: controls;
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between control buttons */
    margin-top: 20px;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

.sba, .sba1 {
    width: clamp(40px, 8vw, 70px);
    height: auto;
    background-color: white;
    border-radius: 50%;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.3s;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); /* Added glow */
}

.sba:hover, .sba1:hover {
    transform: scale(1.1);
}

/* Audio elements */
audio {
    display: none;
}

/* Media Queries for fine-tuning on different screen sizes */
@media (min-width: 768px) {
    section {
        /* Allow section to take full width */
        max-width: 100%; /* Make it occupy 100% of available width on desktop */
        padding: 20px; /* Add more padding for full-width layout */

        /* Revised grid for desktop */
        grid-template-areas:
            "minus2 score1 score1 score2 score2 plus1"
            ".      .      time   time   .       ."
            "plus2 .      periodo periodo .       minus1"
            ".      controls controls controls controls ."
        ;
        grid-template-columns: 0.5fr 1fr 1fr 1fr 1fr 0.5fr; /* More detailed column control */
        gap: 20px;
    }

    /* Repositioning elements in the new grid */
    #o1 { 
        grid-area: score1; 
        font-size: clamp(6rem, 18vw, 18rem); /* Even larger score */
        padding: 20px;
    }
    #o3 { 
        grid-area: score2; 
         padding: 20px;
        font-size: clamp(6rem, 18vw, 18rem); /* Even larger score */
    }

    #q2 { grid-area: minus1; align-self: end; } /* Align to bottom of cell */
    #q1 { grid-area: plus1; align-self: start; } /* Align to top of cell */
    #q4 { grid-area: minus2; align-self: start; } /* Assuming q4 is for team 2 minus, aligns to top */
    #q3 { grid-area: plus2; align-self: end; } /* Assuming q3 is for team 2 plus, aligns to bottom */

    #o5 {
        grid-area: time;
        font-size: clamp(8rem, 22vw, 18rem); /* Even larger timer */
    }

    #o2 { grid-area: periodo; margin-top: 0; }

    .controls-container {
        grid-area: controls;
        gap: 20px; /* More space between buttons on desktop */
        margin-top: 30px;
    }

    nav {
        max-width: 100%; /* Allow nav to also take full width if desired */
    }

    header {
        font-size: clamp(2rem, 6vw, 4rem); /* Adjust header size for larger screen */
    }
}

/* Very small screens adjustment */
@media (max-width: 480px) {
    section {
        grid-template-areas:
            "score1 score2"
            "minus2 plus1"
            "plus2 minus1"
            "time time"
            "periodo periodo"
            "controls controls";
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    #p1, #p2 {
        font-size: clamp(1.5rem, 6vw, 3rem);
        padding: 5px;
    }

    #l1, #l2 {
        width: clamp(25px, 6vw, 40px);
    }

    #o1, #o3 {
        font-size: clamp(2.5rem, 10vw, 6rem);
    }

    #o5 {
        font-size: clamp(2.5rem, 10vw, 8rem);
    }

    #q1, #q2, #q3, #q4 {
        width: clamp(35px, 7vw, 50px);
        height: clamp(35px, 7vw, 50px);
        font-size: clamp(0.8rem, 4vw, 2rem);
    }

    .sba, .sba1 {
        width: clamp(35px, 7vw, 60px);
        padding: 8px;
    }
    
    .controls-container {
        gap: 10px;
    }
}