/* ---------------------- FONT PRINCIPALE E SFONDO ---------------------- */
body { 
    font-family: 'Schoolbell', cursive; 
    text-align: center; 
    font-size: 20px; 
    margin: 0;
    color: white;
    background: url('../images/background.jpg') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

/* Contenitore principale */
#mainContainer {
    width: 100%; 
    height: 100%; 
    transform-origin: top center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    margin-top: 20px;
    position: relative;
}
/* ==================== Notifiche stile iPhone ==================== */

/* Container notifiche */
#notificationContainer {
    position: fixed;
    top: 20px;                 /* distanza dall'alto */
    left: 50%;                 /* centrato orizzontalmente */
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;      /* permette click sugli elementi sottostanti */
}

/* Notifica singola */
.notification {
    min-width: 250px;
    max-width: 300px;
    background: rgba(50, 50, 50, 0.95); /* sfondo semi-trasparente */
    color: white;
    font-family: 'Schoolbell', cursive;
    font-size: 16px;
    padding: 15px 20px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    opacity: 0;                 /* invisibile inizialmente */
    transform: translateY(-100px); /* parte dall’alto */
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Animazione di comparsa */
.notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* Animazione di scomparsa */
.notification.hide {
    opacity: 0;
    transform: translateY(-100px);
}

/* ---------------------- Gioco ---------------------- */
#gameContainer {
    position: relative;
}

/* ❤️ Lives Display */
#livesDisplay {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    z-index: 20;
    font-family: 'Schoolbell', cursive;
}

#livesDisplay img { width: 40px; margin: 0 4px; }

/* ---------------------- Sidebar ---------------------- */
.sidebarContainer {
    width: 250px;
    background: rgba(0,0,0,0.6);
    border: 2px solid #444;
    border-radius: 8px;
    padding: 10px;
    margin-top: 22px;
    overflow-y: auto;
    font-family: 'Schoolbell', cursive;
}

.sidebarContainer h2 { text-align: center; margin-top: 0; }
.sidebarContainer ul { list-style: none; padding: 0; margin: 0; }
.sidebarContainer li { padding: 6px; border-bottom: 1px solid #333; }

/* ---------------------- Billboard ---------------------- */
#billboard { 
    display: flex; 
    width: 503px; 
    min-height: 80px; 
    margin: auto; 
    margin-bottom: 20px; 
    gap: 10px;
}

#billboard div { 
    margin: 2px; 
    border-radius: 6px; 
    border: 2px solid #9e9e9e; 
    background: rgba(255,255,255,0.1);
}

#woneyLogo { 
    max-width: 100%; 
    max-height: 100%; 
    display: block; 
    margin: 0 auto; 
}

#win, #loss { width: 20%; align-content: center; background: rgba(255,255,255,0.1); }
#announcements { width: 60%; align-content: center; background: rgba(255,255,255,0.1); }

/* ---------------------- Overlay ---------------------- */
.overlay { 
    position:absolute; top:0; left:0; 
    width:100%; height:100%; 
    display:flex; flex-direction:column; justify-content:center; align-items:center; 
    z-index:10; 
    font-family: 'Schoolbell', cursive; 
}

/* ---------------------- Pulsanti ---------------------- */
button { 
    font-family: 'Schoolbell', cursive;
    font-size:16px; 
    padding:5px 10px; 
    margin:10px; 
    cursor:pointer; 
    border-radius: 8px; 
}

#loginBtn {
    font-size: 32px;   
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 12px;
    background-color: #1da1f2;
    color: white;
    border: none;
}

#logoutBtn {
    font-size: 16px;
    
    display: none;
    cursor: pointer;
    border-radius: 8px;
}

/* ---------------------- Game Over ---------------------- */
#gameOverText { 
    color:red; 
    font-size:72px; 
    font-weight:bold; 
    margin-bottom:20px; 
}



/* ---------------------- Responsive Scaling ---------------------- */
@media (max-width: 1200px) { #mainContainer { transform: scale(0.9); } }
@media (max-width: 1000px) { #mainContainer { transform: scale(0.8); } }
@media (max-width: 800px)  { #mainContainer { transform: scale(0.7); } }

@media (max-width: 768px) {
    body { overflow: auto; }

    #mainContainer {
        transform: none !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        overflow-y: auto;  /* permette scroll verticale */
        overflow-x: hidden; /* blocca scroll orizzontale */

        width: 100%;
        height: auto;
        gap: 20px;
        padding: 10px 0;
    }

    #winnersContainer { order: 1; width: 90%; max-width: 600px; }
    #gameContainer    { order: 2; width: 90%; max-width: 600px; }
    #leaderboardContainer { order: 3; width: 90%; max-width: 600px; }
    #billboard { flex-direction: column !important; width: 100%; }
    #win, #loss, #announcements { width: 100% !important; margin-bottom: 10px; }

    canvas { max-width: 100%; height: auto; background: transparent;border: 20px;}
    .sidebarContainer { width: 100%; margin: 0 auto; }
}
/* Touch overlay mobile */
#touchControls {
    display: none;
    position: absolute;
    top:0; left:0;
    width: 100%; height: 100%;
    z-index: 999;
}

#touchControls div {
    position: absolute;
    touch-action: none;
}

/* Quattro zone touch */
#touchUp    { top:0; left:33%; width:34%; height:33%; }
#touchDown  { bottom:0; left:33%; width:34%; height:33%; }
#touchLeft  { top:33%; left:0; width:33%; height:34%; }
#touchRight { top:33%; right:0; width:33%; height:34%; }