:root { --blue: #083243; --white: #ffffff; }

* { box-sizing: border-box; }

body { font-family: 'Plus Jakarta Sans', sans-serif; text-align: center; margin: 0; padding: 0 10px; background: var(--white); color: var(--blue); }


.distractor {
    position: absolute;
    background-color: #FFD700; /* o il giallo corporate del cliente */
    border-radius: 0;          /* quadrati come il target */
}

h1 { margin-top: 20px; letter-spacing: 2px; font-size: clamp(20px, 5vw, 40px); }



.stats-bar {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; max-width: 620px; margin: 10px auto;
    font-weight: bold; font-size: clamp(13px, 3vw, 20px);
    padding: 0 4px;
}

.stats-bar span[id] { font-size: clamp(22px, 6vw, 20px); }

#bestDisp { font-size: clamp(11px, 2.5vw, 14px); }





#game-container {
    position: relative;
    width: 100%; max-width: 620px;
    aspect-ratio: 6 / 5;
    margin: 0 auto;
    border: 2px solid var(--white);  /* era var(--blue) */
}



#gameArea { width: 100%; height: 100%; background: var(--white); position: relative; overflow: hidden; cursor: crosshair; }



.overlay {

    position: absolute; top: 0; left: 0; width: 100%; height: 100%;

    background: var(--white); display: flex; flex-direction: column;

    justify-content: center; align-items: center; z-index: 10;

    padding: 20px;

}

.overlay h2 { font-size: clamp(18px, 5vw, 40px); margin-bottom: 15px; }



#target { position: absolute; background: var(--blue); cursor: pointer; display: none; }

.target-blue { position: absolute; background: var(--blue); cursor: pointer; }



input {
    padding: 10px; font-size: clamp(15px, 4vw, 20px);
    border: 2px solid var(--blue); margin: 10px;
    width: min(280px, 80%); text-align: center;
    border-radius: 0; outline: none;
	font-family: 'Plus Jakarta Sans';
}

.btn {
    padding: 7px 25px; font-size: clamp(14px, 4vw, 20px);
    font-weight: bold; color: var(--white); background: var(--blue);
    border: none; cursor: pointer; width: min(260px, 80%);
    border-radius: 0; margin-top: 10px;
    font-family: 'Plus Jakarta Sans';
    white-space: nowrap;
}

.btn-exit { background: var(--white); color: var(--blue); border: 2px solid var(--blue); }


#resScore { font-size: clamp(16px, 4.5vw, 24px); margin: 10px 0; }


#leaderboard-section {

    width: 100%; max-width: 620px;

    margin: 30px auto; padding-top: 20px;



}

table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: clamp(13px, 3vw, 16px); }

th, td { padding: 8px 10px; text-align: left; }
.me { background: #f9f9f9; font-weight: bold; }
/* Solo mobile: espande il container quando il form nuovo utente è visibile */
@media (max-width: 480px) {
    #game-container:has(#newUserFields[style*="block"]) {
        aspect-ratio: unset;
        height: auto;
    }
    #game-container:has(#newUserFields[style*="block"]) #startScreen {
        position: relative;
        height: auto;
        justify-content: flex-start;
        overflow: visible;
    }
}