/* Stile base */


body {


    font-family: 'Arial', sans-serif;


    margin: 0;


    padding: 0;


    background: #f4f4f9;


    color: #333;


    display: flex;


    flex-direction: column;


    align-items: center;


    min-height: 100vh;


    transition: background-color 0.5s ease; /* Transizione per il cambio colore */


}





/* Header */


header {


    background: url('banner.png') no-repeat center;


    background-size: cover;


    color: white;


    text-align: center;


    padding: 60px 20px;


    width: 100%;


    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);


}





header h1 {


    font-size: 2.5em;


    font-weight: bold;


    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);


}





/* Main Area */


main {


    margin: 20px;


    text-align: center;


}





.scoreboard {


    background: white;


    padding: 20px;


    border-radius: 8px;


    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);


    margin-bottom: 20px;


}





.remaining-score, .checkout-suggestion {


    font-size: 1.5em;


    margin: 10px 0;


}





/* Input Area */


.input-area {


    display: flex;


    justify-content: center;


    gap: 10px;


}





input[type="number"] {


    padding: 10px;


    font-size: 16px;


    border: 1px solid #ccc;


    border-radius: 4px;


    width: 150px;


}





button {


    padding: 10px 20px;


    font-size: 16px;


    color: white;


    background: #007BFF;


    border: none;


    border-radius: 4px;


    cursor: pointer;


    transition: background 0.3s ease;


}





button:hover {


    background: #0056b3;


}





/* Pulsanti per il colore */


.color-buttons {


    margin-top: 20px;


    text-align: center;


}





.color-button {


    padding: 10px 20px;


    margin: 5px;


    font-size: 16px;


    border: none;


    border-radius: 4px;


    cursor: pointer;


    color: white;


    transition: background 0.3s ease;


}





.color-button[data-color="blue"] {


    background: #007BFF;


}





.color-button[data-color="red"] {


    background: #FF4C4C;


}





.color-button[data-color="green"] {


    background: #28A745;


}





.color-button[data-color="white"] {


    background: #F4F4F9;


    color: #333;


}





.color-button:hover {


    opacity: 0.8;


}





/* Log Area */


.log-area {


    margin-top: 20px;


    text-align: left;


    max-width: 600px;


    margin-left: auto;


    margin-right: auto;


    padding: 10px;


    background: white;


    border-radius: 8px;


    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);


}





.log-area h2 {


    margin-bottom: 10px;


}





.log-area ul {


    list-style: none;


    padding: 0;


}





.log-area li {


    padding: 5px 0;


    border-bottom: 1px solid #ccc;


}





/* Overlay per le immagini */


.overlay {


    position: fixed;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    background: rgba(0, 0, 0, 0.7);


    display: flex;


    justify-content: center;


    align-items: center;


    z-index: 1000; /* Livello dell'overlay */


}





.overlay.hidden {


    display: none;


}





.overlay-image {


    max-width: 80%;


    max-height: 80%;


    animation: pop 0.5s ease-out;


}





/* Animazione dell'immagine */


@keyframes pop {


    0% {


        transform: scale(0);


    }


    100% {


        transform: scale(1);


    }


}





/* Effetto scintille */


.spark-container {


    position: fixed;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    pointer-events: none;


    z-index: 2000; /* Sopra l'overlay */


}





.spark {


    position: absolute;


    width: 10px;


    height: 10px;


    background: radial-gradient(circle, yellow, orange, red);


    border-radius: 50%;


    animation: spark-animation 1s ease-out infinite;


    opacity: 0;


}





@keyframes spark-animation {


    0% {


        transform: scale(1);


        opacity: 1;


    }


    100% {


        transform: scale(2);


        opacity: 0;


    }


}





/* Effetto confetti */


.confetti-container {


    position: fixed;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    pointer-events: none;


    z-index: 2000; /* Sopra l'overlay */


}





.confetti {


    position: absolute;


    width: 10px;


    height: 10px;


    background: var(--confetti-color, red);


    animation: confetti-fall 3s ease-out forwards, confetti-spin 1s linear infinite;


}





@keyframes confetti-fall {


    0% {


        transform: translateY(0);


    }


    100% {


        transform: translateY(100vh);


    }


}





@keyframes confetti-spin {


    0% {


        transform: rotate(0);


    }


    100% {


        transform: rotate(360deg);


    }


}





/* Animazione del punteggio */


@keyframes flash {


    0%, 100% {


        color: #333;


        transform: scale(1);


    }


    50% {


        color: #FF4500;


        transform: scale(1.2);


    }


}





.flash {


    animation: flash 0.5s ease-in-out;


}





/* Footer */


footer {


    margin-top: auto;


    text-align: center;


    padding: 10px;


    background: #333;


    color: white;


    width: 100%;


    font-size: 0.9em;


}

/* ===== BANNER TORNEI ===== */
.tournament-links {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 30px 0 20px;
    flex-wrap: wrap;
}

.tournament-link {
    display: block;
    min-width: 320px;
    text-align: center;

    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 1px;

    color: #ffffff !important;
    text-decoration: none !important;

    padding: 22px 30px;
    border-radius: 16px;

    background: linear-gradient(135deg, #111, #333);
    border: 3px solid #ffcc00;

    box-shadow: 0 10px 25px rgba(0,0,0,0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tournament-link:hover {
    transform: scale(1.04);
    box-shadow: 0 14px 35px rgba(0,0,0,0.6);
}

/* Mobile */
@media (max-width: 768px) {
    .tournament-link {
        min-width: 90%;
        font-size: 1.4rem;
    }
}