/* Usiamo Flexbox per il layout principale */
        .main-content {
            display: flex;
            gap: 20px; /* Spazio tra le colonne */
        }

        /* Applica queste regole quando la classe 'center-visible' è attiva sul container */
        .main-content.center-visible .left-panel {
            flex: 1; /* Il sinistro scende a 1 parte (50% dello spazio Left+Center) */
       }

        .right-panel {
            flex: 1; /* Occupa 1/3 dello spazio */
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            border: 2px solid black;
            padding: 5px;
        }
        .right-panel h3 {
            text-align: center;
            margin-top: 0;
            color: #c0392b;
        }

        .scrollable-area {
            flex-grow: 1; /* Permette all'area di riempire lo spazio verticale rimanente nel .center-panel */
            flex-shrink: 1; /* Permette all'area di ridursi se necessario */
            flex-basis: auto; /* Punto di partenza */
            height: 380px; /* si può usare auto ma non è consigliabile */
            /* max-height: 100%; */ /* L'altezza massima sarà l'altezza del .center-panel */
            overflow-y: auto; /* Funzionerà quando il contenuto supererà l'altezza stabilita da flex-grow */
            border: 1px solid #ddd;
            width: 80%;
            /* box-sizing: border-box; NON indispensabile per il problema dello scroll, ma buona pratica */
            }

        .center-panel {
            flex: 1; /* Il centrale prende 1 parte (50% dello spazio Left+Center) */
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 2px solid black;
            padding: 10px;
            height: 100%; /* O una percentuale di altezza definita */
            min-height: 0; /* Impedisce al flex item di crescere oltre l'altezza del flex container */
       }

        .center-panel.hidden {
            display: none; /* Rimuove completamente il pannello centrale dal layout */
        }

        .left-panel {
            flex: 2; /* Occupa 2/3 dello spazio */
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 2px solid black;
            padding: 10px;
        }

        /* Stile per il contenitore principale del tabellone */
        #tabellone {
            display: flex;
            flex-wrap: wrap; 
            justify-content: center; /* Centra i blocchi orizzontalmente */
            gap: 10px; /* Spazio tra i 6 blocchi */
            width: 415px; /* Larghezza esatta per contenere 2 blocchi affiancati + gap + bordi */
            margin: 2px auto;
            padding: 2px;
            background-color: #006400;
            border: 2px solid black;
        }

        /* Stile per ciascuno dei 6 blocchi */
        .blocco-numeri {
            display: flex;
            flex-wrap: wrap; 
            justify-content: center; 
            width: 180px; /* Larghezza esatta per 5 numeri + 4 gap + bordi */
            gap: 5px; /* Spazio tra i singoli numeri */
            border: 1px solid black; /* Bordo per evidenziare il blocco */
        }

        /* Stile per i singoli numeri */
        .numero-tabellone {
            width: 30px;
            height: 30px; 
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            color: black;
            border: 1px solid #ccc;
            font-weight: bold;
        }
        
        .numero-estratto {
            width: 30px;
            height: 30px; 
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #FFCC99;
            color: black;
            border: 1px solid #ccc;
            font-weight: bold;
        }

        .numero-display {
            background-color: #ffc107;
            color: #000;
            border-radius: 50%;
            transform: scale(1.1);
            transition: all 0.3s ease;
            width: 80px;
            height: 80px;
            padding: 10px;
        }

         .widget-section {
            background-color: #f9f9f9;
            border: 1px solid #c0c0c0;
            text-align: center;
            Font-Size: 1.2em;
            font-weight: bold;
            padding: 5px;
            border-radius: 4px;
        }

        .cartella-grid {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            border: 5px solid #006400;
        }

        .numero, .spazio-vuoto {
            border: 1px solid #ccc; /* Bordo per distinguere le caselle */
            height: 30px; /* Altezza fissa */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.9em;
            font-weight: bold;
        }
        .spazio-vuoto {
            background-color: #f0f0f0; /* Sfondo per le caselle vuote */
            visibility: visible; /* Assicurati che non siano nascoste */
        }
        .numero {
            background-color: #fff;
        }

        .numero.segnato {
            background-color: #ffc107;
            color: #000;
            border-radius: 50%;
            transform: scale(1.1);
            transition: all 0.3s ease;
        }

         .scrollable-risultati {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            /* align-items: center;  */
            height: 150px;
            overflow-y: auto;
            /* border: 2px #000;  */
            width: 100%;
            /* box-sizing: border-box; */
        }

        #log-risultati ul {
            list-style: none;
            padding: 0;
        }

        .amb-Color {
            background-color: #00FFFF;
            height: 18px;
            padding: 5px;

        }

        .trn-Color {
            background-color: #ADFF2F;
            height: 18px;
            padding: 5px;

        }

        .qtr-Color {
            background-color: #FFE4C4;
            height: 18px;
            padding: 5px;
        }

        .cnq-Color {
           background-color: #FFFF00;
           height: 18px;
           padding: 5px;
        }

        .tmb-Color {
           background-color: #DAA520;
           height: 18px;
           padding: 5px;
        }

        .nascosto {
            display: none;
        }

        .pulsante-estrai {
            padding: .9em;
            width: 10em;
              color: #ffffff;
              text-shadow: 1px 1px 1px #000;
            border: solid thin #882d13;
            border-radius: .7em;
            box-shadow: 2px 2px 2px #bbb;
            background-color: #ce401c;
            background-image: -webkit-gradient(linear, left top, left bottom,
            from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));
        }
        .pulsante-estrai:hover {
           cursor: pointer;
         }

        .pulsante-estrai:disabled {
           /* Colore di base più chiaro e meno saturo del #ce401c */
           background-color: #f0a08e;
           border: solid thin #c7958b; /* Bordo più chiaro e meno contrastante */
           color: #f5f5f5; /* Testo leggermente ingrigito o più chiaro */
           text-shadow: none; /* Rimuovi l'ombra per un aspetto più piatto */
           box-shadow: none; /* Rimuovi l'ombra per un aspetto piatto/non cliccabile */
           background-image: -webkit-linear-gradient(top, #f0a08e 0%, #d48c7c 100%); /* Sfumatura con colori chiari e poco contrastanti */
           cursor: not-allowed; /* Indica che non si può cliccare */
        }

          .button-green {
            /* Stili base per farlo sembrare un bottone */
            display: inline-block;
            padding: .5em;
            background-color: #00FF00;
            color: black;
            text-align: center;
            border: none;
            border-radius: 5px;
            cursor: pointer;
         }

          .button-green:disabled {
            /* Stili base per farlo sembrare un bottone disabilitato*/
            display: inline-block;
            padding: .5em;
            background-color: #8FBC8F;
            color: white;
            text-align: center;
            border: none;
            border-radius: none;
            cursor: not-allowed;
         }

          .button-black {
            display: inline-block;
            padding: .5em;
            background-color: #000000; /* Un colore nero */
            color: white;
            text-align: center;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 25px;
            margin-right: 70px;
         }

           .button-exit {
            display: inline-block;
            padding: .5em;
            background-color: #00FF00; /* Un colore verde */
            color: black;
            text-align: center;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 80px;
            margin-right: 5px;
         }

         .bottone-link {
            /* Stili base per farlo sembrare un bottone */
            display: inline-block;
            padding: .5em;
            background-color: #007bff; /* Un colore blu */
            color: white; /* Testo bianco */
            text-align: center;
            /* text-decoration: none; Rimuove la sottolineatura tipica dei link */
            border: none;
            border-radius: 5px; /* Bordi arrotondati */
            cursor: pointer;
            /* font-size: 16px;   */
         }

         .bottone-link:hover {
            background-color: #0056b3; /* Colore più scuro al passaggio del mouse */
         }

          .bottone-link:disabled {
            /* Stili base per farlo sembrare un bottone disabilitato*/
            display: inline-block;
            padding: .5em;
            background-color: #80BFFF; /* Un colore blu chiaro */
            color: white; /* Testo bianco */
            text-align: center;
            border: none;
            border-radius: none;
            cursor: not-allowed;
         }

          .button-tab {
            /* Stili base per farlo sembrare un bottone */
            display: inline-block;
            padding: .5em;
            background-color: #ffc107;
            color: black;
            text-align: center;
            border: none;
            border-radius: 5px;
            cursor: pointer;
         }

         .button-tab:hover {
            background-color: #0056b3;
         }

         .button-tab:disabled {
            /* Stili base per farlo sembrare un bottone disabilitato*/
            display: inline-block;
            padding: .5em;
            background-color: #fff2cc;
            color: gray;
            text-align: center;
            border: none;
            border-radius: none;
            cursor: not-allowed;
         }

         #btn-start {
            margin-right: 20px;
         }

          #btn-draw {
            margin: 0 25px;
         }

         #btn-stampa {
             margin: 0 30px;
         }

        .scrollable-play {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            /* align-items: center;  */
            height: 220px;
            overflow-y: auto;
            /* border: 2px #000;  */
            width: 100%;
            /* box-sizing: border-box; */
        }

         /* Stile per il Pannello del Brivido */
         .pannello-brivido-container {
             padding: 2px;
             /* border: 2px solid #ccc;
             border-radius: 8px;           */
             background-color: #f8f9fa;
             margin-top: 2px; /* Dagli un po' di spazio sopra */
         }

         .brivido-grid {
             display: flex;
             justify-content: space-between;
             gap: 20px; /* Spazio tra le colonne */
         }

         .brivido-colonna {
             /* flex: 1;  Ogni colonna occupa lo stesso spazio */
             width: 80px;
             border: 1px solid #ddd;
             border-radius: 5px;
             text-align: center;
         }

         .brivido-header {
             background-color: #3498db;
             color: white;
             font-weight: bold;
             padding: 2px;
             border-top-left-radius: 4px;
             border-top-right-radius: 4px;
         }

         .brivido-body {
             padding: 5px;
             min-height: 50px; /* Altezza minima per non far collassare la colonna */
             display: flex;
             flex-wrap: wrap; /* Manda a capo i numeri se sono troppi */
             gap: 5px; /* Spazio tra i numeri delle cartelle */
             justify-content: center;
             align-items: flex-start;
         }

         /* Stile per il numerino della cartella */
         .cartella-in-attesa {
             background-color: #e74c3c;
             color: white;
             font-weight: bold;
             border-radius: 50%; /* Lo rende un cerchio */
             width: 30px;
             height: 30px;
             display: flex;
             justify-content: center;
             align-items: center;
             box-shadow: 0 2px 4px rgba(0,0,0,0.2);
         }