:root {
    --primary-font: 'Fredoka', system-ui, -apple-system, sans-serif;
    --bg-color: #FFF2D6;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-color);
    font-family: var(--primary-font);
}

.screen {
    display: none;
    width: 100vw;
    height: 100dvh;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.screen.active { display: flex; flex-direction: column; }
.warm-gradient-bg { background: radial-gradient(circle at center, #FFFDF8 0%, #FFEED5 100%); }

.festoon-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 45px; z-index: 5; pointer-events: none; display: flex; justify-content: space-around;
}

.flag {
    width: 30px; height: 38px; clip-path: polygon(0% 0%, 100% 0%, 50% 100%); transform-origin: top center;
    animation: swing 3s ease-in-out infinite alternate; box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

@keyframes swing { 0% { transform: rotate(-8deg); } 100% { transform: rotate(8deg); } }

/* (Puoi incollare qui tutto il resto delle tue classi CSS che avevi prima) */
        
        
        
        
        :root {
            --primary-font: 'Fredoka', system-ui, -apple-system, sans-serif;
            --bg-color: #FFF2D6;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: var(--bg-color);
            font-family: var(--primary-font);
        }

        /* --- SISTEMA SCHERMATE --- */
        .screen {
            display: none;
            width: 100vw;
            height: 100dvh;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        }

        .screen.active {
            display: flex;
            flex-direction: column;
        }

        /* Sfondi morbidi e caldi */
        .warm-gradient-bg {
            background: radial-gradient(circle at center, #FFFDF8 0%, #FFEED5 100%);
        }

        /* Decorazione Festoni (Ghirlanda) */
        .festoon-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 45px;
            z-index: 5;
            pointer-events: none;
            display: flex;
            justify-content: space-around;
        }

        .flag {
            width: 30px;
            height: 38px;
            clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
            transform-origin: top center;
            animation: swing 3s ease-in-out infinite alternate;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        @keyframes swing {
            0% { transform: rotate(-8deg); }
            100% { transform: rotate(8deg); }
        }

        /* --- 1. SCHERMATA MENU INIZIALE --- */
        #mainMenuScreen {
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
        }

        .menu-header h1 {
            font-size: clamp(2rem, 8vh, 3.8rem);
            color: #FF2D55;
            text-shadow: 3px 3px 0 #FFF, 6px 6px 0 rgba(0,0,0,0.06);
            margin-bottom: 5px;
            animation: bounceText 2s ease-in-out infinite alternate;
        }

        @keyframes bounceText {
            0% { transform: scale(0.98) translateY(0); }
            100% { transform: scale(1.02) translateY(-6px); }
        }

        .menu-subtitle {
            font-size: clamp(0.9rem, 3vh, 1.3rem);
            color: #6D4C41;
            margin-bottom: 25px;
            font-weight: 600;
        }

        /* Griglia Bottoni Principali */
        .menu-grid {
            display: flex;
            gap: 20px;
            max-width: 900px;
            width: 90%;
            justify-content: center;
        }

        .menu-card {
            flex: 1;
            background: white;
            border-radius: 24px;
            border: 6px solid #FFF;
            box-shadow: 0 12px 24px rgba(0,0,0,0.08);
            padding: clamp(15px, 4vh, 30px) 15px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .menu-card:active {
            transform: scale(0.95);
        }

        .menu-card-icon {
            font-size: clamp(2.5rem, 8vh, 4rem);
            margin-bottom: 12px;
        }

        .menu-card-title {
            font-size: clamp(1rem, 3.5vh, 1.5rem);
            font-weight: 700;
            color: #333;
            margin-bottom: 5px;
        }

        .menu-card-desc {
            font-size: clamp(0.75rem, 2vh, 0.95rem);
            color: #777;
            font-weight: 600;
            line-height: 1.3;
        }

        /* Colori dinamici delle card del menu */
        .card-learn { border-color: #34C759 !important; box-shadow: 0 10px 0 #2CA54A, 0 12px 24px rgba(0,0,0,0.08); }
        .card-play { border-color: #FF9500 !important; box-shadow: 0 10px 0 #D97E00, 0 12px 24px rgba(0,0,0,0.08); }
        .card-songs { border-color: #007AFF !important; box-shadow: 0 10px 0 #005EC4, 0 12px 24px rgba(0,0,0,0.08); }

        /* --- 2. SCHERMATA SELEZIONE CANZONI --- */
        #songSelectScreen {
            background-color: #FFFDF8;
        }

        .screen-header {
            flex-shrink: 0;
            height: 65px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30px;
            border-bottom: 3px solid #FFF1D6;
            background-color: white;
        }

        .screen-header h2 {
            font-size: clamp(1.1rem, 4vh, 1.6rem);
            color: #FF5E97;
        }

        .back-btn {
            background: #FF2D55;
            color: white;
            border: none;
            padding: 8px 18px;
            font-size: clamp(0.8rem, 2.5vh, 1.1rem);
            font-weight: 700;
            border-radius: 12px;
            cursor: pointer;
            box-shadow: 0 4px 0 #C41B3B;
            transition: transform 0.1s;
        }

        .back-btn:active {
            transform: translateY(2px);
            box-shadow: 0 2px 0 #C41B3B;
        }

        .songs-container {
            flex: 1;
            overflow-y: auto;
            padding: 20px 30px;
        }

        .songs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 15px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .song-item {
            background: white;
            border: 4px solid #FFF2D6;
            border-radius: 18px;
            padding: 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.03);
            transition: transform 0.15s, border-color 0.15s;
        }

        .song-item:active {
            transform: scale(0.97);
        }

        .song-item-icon {
            font-size: 2rem;
            background: #FFF9EC;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
        }

        .song-item-details h3 {
            font-size: 0.95rem;
            color: #333;
            font-weight: 700;
            margin-bottom: 2px;
        }

        .song-item-details p {
            font-size: 0.75rem;
            color: #888;
            font-weight: 600;
        }

        /* --- 3. SCHERMATA DEL PIANOFORTE (MINIMALISTA) --- */
        .piano-container-full {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            position: relative;
        }

        /* Pannello Superiore Ultrasottile */
        .mini-display-panel {
            flex: 0 0 15%;
            min-height: 55px;
            max-height: 70px;
            background-color: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.03);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            z-index: 2;
            border-bottom: 3px solid rgba(0,0,0,0.04);
        }

        .mini-left-group {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .mini-badge {
            background: #007AFF;
            color: white;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: clamp(0.7rem, 2vh, 0.9rem);
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .mini-color-label {
            font-size: clamp(0.9rem, 2.5vh, 1.4rem);
            font-weight: 700;
            color: #444;
            background: #FFF4DC;
            padding: 4px 15px;
            border-radius: 15px;
        }

        /* Onda Neon Mini audio */
        .wave-container {
            display: flex;
            align-items: center;
            gap: 3px;
            height: 30px;
        }

        .wave-bar {
            width: 5px;
            height: 6px;
            background-color: #FF5E97;
            border-radius: 3px;
            box-shadow: 0 0 8px #FF5E97;
            transition: height 0.1s ease;
        }

        /* AREA TASTIERA DEL PIANOFORTE */
        .keyboard-container {
            flex: 1;
            min-height: 0;
            padding: 35px 15px 15px 15px; /* Lascia spazio sopra per le stelle */
            z-index: 2;
            display: flex;
            gap: 8px;
            background: radial-gradient(circle at center, #FFFBF2 0%, #FFEFCF 100%);
        }

        .piano-key {
            flex: 1;
            min-width: 0;
            height: 100%;
            border-radius: 16px;
            border: 4px solid #FFF;
            box-shadow: 0 6px 12px rgba(0,0,0,0.08), inset 0 -6px 0 rgba(0,0,0,0.12);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 12px 4px;
            position: relative;
            transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s;
        }

        .piano-key:active, .piano-key.active {
            transform: translateY(5px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05), inset 0 -2px 0 rgba(0,0,0,0.08);
            filter: brightness(1.1);
        }

        /* GUIDA ULTRA LUMINOSA ED EVIDENTE PER I TASTI ATTIVI */
        .piano-key.guide-active {
            animation: keyGlowPulse 0.5s infinite alternate;
            border: 6px solid #FFF !important;
            transform: scale(1.06) translateY(-6px);
            filter: brightness(1.35) saturate(1.15) !important;
            z-index: 10;
        }

        /* Stella che rimbalza sopra il tasto della nota da suonare */
        .piano-key.guide-active::before {
            content: "⭐";
            position: absolute;
            top: -42px;
            left: 50%;
            transform: translateX(-50%);
            font-size: clamp(1.4rem, 4.5vh, 2.2rem);
            animation: starBounce 0.5s infinite alternate;
            text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 20px #FFD700;
            z-index: 12;
            pointer-events: none;
        }

        @keyframes starBounce {
            0% { transform: translateX(-50%) translateY(0) scale(1); }
            100% { transform: translateX(-50%) translateY(-12px) scale(1.3); }
        }

        @keyframes keyGlowPulse {
            from {
                box-shadow: 0 0 12px rgba(255,255,255,0.9), inset 0 -6px 0 rgba(0,0,0,0.15);
            }
            to {
                box-shadow: 0 0 35px var(--glow-color), 0 0 15px rgba(255, 255, 255, 0.8), inset 0 -6px 0 rgba(0,0,0,0.15);
            }
        }

        .color-label {
            font-size: clamp(0.75rem, 3.2vh, 1.4rem);
            font-weight: 700;
            text-transform: uppercase;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
            letter-spacing: 1.5px;
            pointer-events: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-height: 65%;
        }

        .key-badge {
            width: clamp(22px, 5vh, 36px);
            height: clamp(22px, 5vh, 36px);
            background: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: clamp(0.7rem, 1.8vh, 0.95rem);
            pointer-events: none;
        }

        /* --- SCHERMATA DI ROTAZIONE --- */
        .rotate-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: #FFE9C9;
            z-index: 999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 30px;
            color: #5D4037;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .rotate-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .rotate-icon {
            font-size: 4.5rem;
            animation: rotateDevice 2s ease-in-out infinite;
            margin-bottom: 15px;
        }

        @keyframes rotateDevice {
            0% { transform: rotate(0deg); }
            50% { transform: rotate(-90deg); }
            100% { transform: rotate(-90deg); }
        }

        .rotate-title {
            font-size: 1.6rem;
            font-weight: 700;
            margin-bottom: 8px;
        }

        /* --- 4. SCHERMATA CELEBRAZIONE ESTASIANTE --- */
        .celebration-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: radial-gradient(circle, #FFDE4D 0%, #FF5E97 100%);
            z-index: 1000;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .celebration-overlay.active {
            display: flex;
            opacity: 1;
        }

        .celebration-trophy {
            font-size: clamp(5rem, 20vh, 8.5rem);
            animation: trophyAward 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite alternate;
            filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
        }

        @keyframes trophyAward {
            0% { transform: scale(0.9) rotate(-10deg); }
            100% { transform: scale(1.15) rotate(10deg); }
        }

        .celebration-title {
            font-size: clamp(2rem, 6.5vh, 4rem);
            font-weight: 700;
            color: #FFF;
            text-shadow: 0 4px 12px rgba(0,0,0,0.25), 0 0 30px rgba(255,255,255,0.4);
            margin: 15px 0 5px 0;
            animation: textPulse 1s ease-in-out infinite alternate;
        }

        .celebration-subtitle {
            font-size: clamp(1.1rem, 3.5vh, 1.8rem);
            font-weight: 600;
            color: #FFFFF0;
            max-width: 80%;
            text-shadow: 0 2px 6px rgba(0,0,0,0.2);
        }

        @keyframes textPulse {
            0% { transform: scale(0.95); text-shadow: 0 4px 12px rgba(0,0,0,0.2); }
            100% { transform: scale(1.05); text-shadow: 0 4px 20px rgba(255,255,255,0.6); }
        }

        /* Particelle di coriandoli/stelle */
        .celebration-particles {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            top: 0;
            left: 0;
        }

        .particle {
            position: absolute;
            font-size: clamp(1.5rem, 5vh, 3rem);
            animation: fallAndSpin 4s linear infinite;
        }

        @keyframes fallAndSpin {
            0% { transform: translateY(-10%) rotate(0deg); opacity: 1; }
            100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
        }

        /* Stile per il nuovo pulsante di celebrazione */
        .celebration-btn {
            margin-top: 40px;
            padding: 15px 40px;
            font-size: clamp(1.2rem, 3.5vh, 1.5rem);
            font-weight: 700;
            color: #FF5E97;
            background-color: white;
            border: none;
            border-radius: 25px;
            box-shadow: 0 8px 0 #FFDE4D, 0 15px 25px rgba(0,0,0,0.2);
            cursor: pointer;
            transition: transform 0.1s, box-shadow 0.1s;
            z-index: 10;
            font-family: var(--primary-font);
        }

        .celebration-btn:active {
            transform: translateY(6px);
            box-shadow: 0 2px 0 #FFDE4D, 0 5px 10px rgba(0,0,0,0.2);
        }

        /* Ottimizzazione estrema schermi bassi */
        @media (max-height: 480px) {
            .mini-display-panel { flex-basis: 12%; padding: 0 15px; }
            .keyboard-container { padding: 30px 10px 10px 10px; gap: 6px; }
            .piano-key { padding: 6px 3px; border-radius: 12px; }
        }
/* Stile per la schermata di login */
#loginScreen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    background: #FFF9E6; /* Colore crema caldo */
}

#loginScreen input, #loginScreen select {
    width: 100%;
    max-width: 350px;
    padding: 18px;
    margin: 10px 0;
    border: 3px solid #FFD60A; /* Bordo colorato */
    border-radius: 25px; /* Angoli super arrotondati */
    font-family: 'Fredoka', sans-serif;
    font-size: 1.2rem;
    outline: none;
    box-shadow: 0 4px 0 #E5BE00; /* Effetto 3D */
}

#loginScreen button {
    background: #FF3B30;
    color: white;
    padding: 20px 50px;
    border: none;
    border-radius: 30px;
    font-family: 'Fredoka', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    transition: transform 0.2s;
    box-shadow: 0 6px 0 #B22222;
}

#loginScreen button:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #B22222;
}

#loginScreen { padding: 40px; display: flex; flex-direction: column; align-items: center; }
#loginScreen input, #loginScreen select { 
    margin-bottom: 15px; width: 300px; padding: 12px; border-radius: 20px; border: 2px solid #ddd; 
}
#loginScreen button { 
    background: #FF3B30; color: white; border: none; padding: 15px 40px; border-radius: 25px; cursor: pointer; font-size: 1.2rem;
    
}

#loginScreen.screen {
    display: none; 
}
#loginScreen.screen.active {
    display: flex !important; 
}