/*
==========================================================
 Giocoscuola - L'Impiccato 3.0
==========================================================
*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

body{

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

    background:#eef5fb;

    color:#222;

}

#contenitore{

    width:100%;

    margin:0 auto;

}
/*=========================================================
  MENU GIOCOSCUOLA
  TENDINA MATERIALI DELLE LEZIONI
=========================================================*/

.gc-dropdown{

    position:relative;

    display:inline-block;

}


.gc-dropdown-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:10px 16px;

    margin:0;

    border:none;

    border-radius:8px;

    background:transparent;

    color:#005baa;

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

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    box-shadow:none;

}


.gc-dropdown-btn:hover{

    background:#005baa;

    color:#ffffff;

    transform:none;

}


.gc-freccia{

    font-size:11px;

    transition:transform .2s ease;

}


.gc-dropdown.aperto .gc-freccia{

    transform:rotate(180deg);

}


/*=========================================================
  MENU A TENDINA DESKTOP
=========================================================*/

.gc-dropdown-menu{

    display:none;

    position:absolute;

    top:100%;

    left:50%;

    transform:translateX(-50%);

    width:280px;

    margin-top:5px;

    padding:8px 0;

    background:#ffffff;

    border-radius:10px;

    box-shadow:0 8px 20px rgba(0,0,0,.20);

    z-index:9999;

}


.gc-dropdown.aperto .gc-dropdown-menu{

    display:block;

}


.gc-dropdown-menu a{

    display:block !important;

    width:100%;

    margin:0 !important;

    padding:10px 15px !important;

    color:#005baa !important;

    background:#ffffff;

    font-family:Arial,Helvetica,sans-serif !important;

    font-size:15px !important;

    font-weight:bold;

    text-align:left;

    text-decoration:none;

    white-space:nowrap;

    border-radius:0 !important;

}


.gc-dropdown-menu a:hover{

    background:#eef5fb !important;

    color:#f7941d !important;

}


/*=========================================================
  SMARTPHONE
=========================================================*/

@media (max-width:900px){

    /*-----------------------------------------------------
      PULSANTE ARANCIONE
    -----------------------------------------------------*/

    #btnMenu{

        display:flex;

        width:50px;

        height:50px;

        padding:0;

        margin:0 10px 0 auto;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:5px;

        background:#f7941d;

        border:none;

        border-radius:8px;

        box-shadow:0 3px 8px rgba(0,0,0,.25);

    }


    #btnMenu span{

        display:block;

        width:28px;

        height:4px;

        margin:0;

        padding:0;

        background:#ffffff;

        border-radius:3px;

    }


    /*-----------------------------------------------------
      MENU MOBILE
    -----------------------------------------------------*/

    #menuGiocoscuola{

        display:none;

        position:absolute;

        top:90px;

        right:0;

        width:280px;

        margin:0;

        padding:8px;

        background:#ffffff;

        border-radius:12px;

        box-shadow:0 10px 25px rgba(0,0,0,.20);

        flex-direction:column;

        align-items:stretch;

        gap:0;

        z-index:9999;

    }


    #menuGiocoscuola.aperto{

        display:flex;

    }


    #menuGiocoscuola > a{

        display:block;

        width:100%;

        margin:0;

        padding:14px 12px;

        text-align:center;

        font-size:18px;

        border-bottom:1px solid #dddddd;

        border-radius:6px;

    }


    #menuGiocoscuola > a:hover{

        background:#f7941d;

        color:#ffffff;

    }


    /*-----------------------------------------------------
      TENDINA MATERIALI MOBILE
    -----------------------------------------------------*/

    .gc-dropdown{

        display:block;

        width:100%;

    }


    .gc-dropdown-btn{

        display:flex;

        width:100%;

        padding:14px 12px;

        margin:0;

        justify-content:center;

        font-size:18px;

        border-radius:6px;

    }


    .gc-dropdown-menu{

        position:static;

        transform:none;

        width:100%;

        margin:0;

        padding:0;

        background:#f4f8fc;

        box-shadow:none;

        border-radius:6px;

    }


    .gc-dropdown-menu a{

        padding:11px 8px !important;

        font-size:15px !important;

        text-align:center;

        white-space:normal;

        border-bottom:1px solid #dddddd;

    }


    .gc-dropdown-menu a:last-child{

        border-bottom:none;

    }

}



#contenitoregioco{

    width:min(1400px,96%);

    margin:25px auto;

    background:white;

    border-radius:16px;

    box-shadow:

        0 10px 35px rgba(0,0,0,.15);

    padding:30px;

}

h2{

    text-align:center;

    color:#005baa;

    font-size:40px;

    margin-bottom:30px;

}
/*=========================================================
HEADER
=========================================================*/

.header{

    width:min(1400px,96%);

    margin:20px auto 0 auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    position:relative;

}

.header img{

    max-height:90px;

}

#btnMenu{

    display:none;

    flex-direction:column;

    justify-content:center;

    gap:6px;

    width:48px;

    height:48px;

    background:#f7941d;

    border:none;

    border-radius:8px;

    cursor:pointer;

}

#btnMenu span{

    display:block;

    width:28px;

    height:4px;

    background:white;

    margin:auto;

    border-radius:2px;

}

#menuGiocoscuola{

    display:flex;

    gap:15px;

    align-items:center;

}

#menuGiocoscuola a{

    text-decoration:none;

    color:#005baa;

    font-weight:bold;

    padding:10px 16px;

    border-radius:8px;

    transition:.25s;

}

#menuGiocoscuola a:hover{

    background:#005baa;

    color:white;

}


/*=========================================================
BANNER
=========================================================*/

#headerGiocoscuola{

    width:min(1400px,96%);

    margin:15px auto;

    text-align:center;

}

#headerGiocoscuola img{

    width:100%;

    border-radius:16px;

    box-shadow:

        0 6px 20px rgba(0,0,0,.18);

}

/*=========================================================
SETUP
=========================================================*/

#setup{

    margin-bottom:30px;

}

.panel{

    background:white;

    border:3px solid #005baa;

    border-radius:16px;

    padding:25px;

    box-shadow:

        0 6px 20px rgba(0,0,0,.10);

}

.panel h2{

    margin:0 0 20px;

    color:#005baa;

    font-size:28px;

    text-align:center;

}

.panel h3{

    margin:0 0 20px;

    color:#005baa;

    font-size:24px;

    text-align:center;

}

.panel label{

    display:block;

    margin-top:15px;

    margin-bottom:8px;

    font-weight:bold;

    color:#005baa;

    font-size:18px;

}

.panel select{

    width:100%;

    padding:12px;

    font-size:18px;

    border:2px solid #005baa;

    border-radius:8px;

    background:white;

}

.gruppoPulsanti{

    margin-top:25px;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.gruppoPulsanti button{

    min-width:220px;

}

/*=========================================================
PULSANTI
=========================================================*/

button{

    background:#f7941d;

    color:white;

    border:none;

    border-radius:10px;

    padding:14px 24px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

    box-shadow:

        0 4px 12px rgba(0,0,0,.18);

}

button:hover{

    background:#e67e00;

    transform:translateY(-2px);

}

button:active{

    transform:translateY(0);

}

button:disabled{

    background:#bdbdbd;

    color:#eeeeee;

    cursor:default;

    transform:none;

    box-shadow:none;

}


/*=========================================================
SELECT
=========================================================*/

select{

    outline:none;

    transition:.25s;

}

select:focus{

    border-color:#f7941d;

    box-shadow:

        0 0 10px rgba(247,148,29,.35);

}


/*=========================================================
INPUT
=========================================================*/

input{

    padding:10px;

    border:2px solid #005baa;

    border-radius:8px;

    font-size:18px;

}
/*=========================================================
AREA GIOCO
=========================================================*/

#gioco{

    display:flex;

    gap:35px;

    align-items:flex-start;

    margin-top:30px;

}

#sinistra{

    flex:0 1 360px;

}

#destra{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:25px;

}


/*=========================================================
IMMAGINE IMPICCATO
=========================================================*/

#imgImpiccato{

    width:100%;

    background:white;

    border:4px solid #005baa;

    border-radius:16px;

    padding:15px;

    box-shadow:

        0 8px 20px rgba(0,0,0,.15);

}


/*=========================================================
TABELLONE
=========================================================*/
#tabellone{

    min-height:90px;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:8px;

    padding:15px;

    background:#000;

    border-radius:12px;

    border:3px solid #005baa;

}

#tabellone img{

    width:42px;

    height:42px;

}

.simbolo{

    font-size:36px;

    font-weight:bold;

    color:#005baa;

    padding:0 5px;

}


/*=========================================================
SUGGERIMENTO
=========================================================*/

#suggerimento{

    min-height:45px;

    background:#fff8d8;

    border-left:8px solid #f7941d;

    border-radius:10px;

    padding:18px;

    font-size:20px;

    color:#444;

}


/*=========================================================
TASTIERA
=========================================================*/

#tastiera{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:12px;

}

.tasto{

    min-height:60px;

    font-size:24px;

    font-weight:bold;

    border-radius:10px;

}

.tasto.usata{

    background:#bdbdbd;

    color:white;

}


/*=========================================================
BARRA INFERIORE
=========================================================*/

#barraInferiore{

    margin-top:30px;

    display:flex;

    justify-content:space-between;

    gap:20px;

    flex-wrap:wrap;

}

.infoBox{

    flex:1;

    min-width:220px;

    background:#ffffff;

    border:3px solid #005baa;

    border-radius:14px;

    padding:18px;

    text-align:center;

    box-shadow:

        0 6px 18px rgba(0,0,0,.12);

}

.infoBox strong{

    display:block;

    margin-bottom:10px;

    color:#005baa;

    font-size:20px;

}

.infoBox span{

    font-size:24px;

    font-weight:bold;

    color:#444;

}


/*=========================================================
FOOTER
=========================================================*/

footer{

    width:min(1400px,96%);

    margin:25px auto;

    text-align:center;

}

#footerGiocoscuola{

    background:#005baa;

    color:white;

    padding:20px;

    border-radius:14px;

    font-size:17px;

    box-shadow:

        0 6px 18px rgba(0,0,0,.15);

}


/*=========================================================
ANIMAZIONI
=========================================================*/

@keyframes zoom{

    0%{

        transform:scale(.4);

    }

    70%{

        transform:scale(1.15);

    }

    100%{

        transform:scale(1);

    }

}

.letteraScoperta{

    animation:zoom .35s;

}

.panel{

    transition:.25s;

}

.panel:hover{

    transform:translateY(-3px);

    box-shadow:

        0 10px 24px rgba(0,0,0,.15);

}
/*=========================================================
 RESPONSIVE TABLET
=========================================================*/

@media (max-width:1200px){

    #contenitoregioco{

        width:95%;

        padding:20px;

    }

    #gioco{

        gap:25px;

    }

    #sinistra{

        flex:0 1 300px;

    }

}


/*=========================================================
 SMARTPHONE ORIZZONTALE
=========================================================*/

@media (max-width:900px){

    #gioco{

        flex-direction:column;

        align-items:center;

    }

    #sinistra,
    #destra{

        width:100%;

        max-width:700px;

    }

    #barraInferiore{

        gap:15px;

    }

    .infoBox{

        min-width:180px;

    }

}


/*=========================================================
 SMARTPHONE
=========================================================*/

@media (max-width:768px){

    #contenitoregioco{

        width:98%;

        padding:15px;

    }

    h2{

        font-size:30px;

    }

    .panel{

        padding:18px;

    }

    .panel h2{

        font-size:24px;

    }

    .panel h3{

        font-size:22px;

    }

    label{

        font-size:18px;

    }

    select{

        width:100%;

        font-size:17px;

    }

    .gruppoPulsanti{

        flex-direction:column;

    }

    .gruppoPulsanti button{

        width:100%;

    }

    #tastiera{

        grid-template-columns:repeat(6,1fr);

    }

    .tasto{

        min-height:55px;

        font-size:22px;

    }

}


/*=========================================================
 SMARTPHONE PICCOLI
=========================================================*/

@media (max-width:480px){

    h2{

        font-size:26px;

    }

    #tastiera{

        grid-template-columns:repeat(5,1fr);

    }

    .tasto{

        min-height:50px;

        font-size:18px;

    }

    .infoBox{

        width:100%;

        min-width:100%;

    }

}


/*=========================================================
 MENU RESPONSIVE
=========================================================*/

@media (max-width:900px){

    #btnMenu{

        display:flex;

    }

    #menuGiocoscuola{

        display:none;

        position:absolute;

        top:90px;

        right:0;

        width:260px;

        background:white;

        border-radius:12px;

        box-shadow:0 10px 25px rgba(0,0,0,.20);

        flex-direction:column;

        padding:15px;

        z-index:999;

    }

    #menuGiocoscuola.aperto{

        display:flex;

    }

    #menuGiocoscuola a{

        width:100%;

        text-align:left;

    }

}


/*=========================================================
 EVITA SCROLL ORIZZONTALE
=========================================================*/

html,
body{

    overflow-x:hidden;

}

/*=========================================================
 GIOCOSCUOLA IMPICCATO 3.0
 RIFINITURE FINALI
=========================================================*/


/*=========================================================
 VARIABILI GRAFICHE
=========================================================*/

:root{

    --blu:#005baa;

    --blu-scuro:#003366;

    --arancio:#f7941d;

    --arancio-hover:#e67e00;

    --giallo:#ffcc00;

    --verde:#39b54a;

    --bianco:#ffffff;

    --grigio:#f4f6f8;

    --ombra:
        0 5px 18px rgba(0,0,0,.18);

}


/*=========================================================
 CLASSI DI UTILITÀ
=========================================================*/

.hidden{

    display:none !important;

}

.visibile{

    display:block !important;

}

.centrato{

    text-align:center;

}

.sinistra{

    text-align:left;

}

.destra{

    text-align:right;

}

.grassetto{

    font-weight:bold;

}

.ombra{

    box-shadow:var(--ombra);

}

.bordoArrotondato{

    border-radius:12px;

}


/*=========================================================
 TRANSIZIONI GLOBALI
=========================================================*/

*{

    transition:

        background-color .20s,

        color .20s,

        border-color .20s,

        box-shadow .20s,

        transform .20s;

}


/*=========================================================
 SELEZIONE TESTO
=========================================================*/

::selection{

    background:var(--arancio);

    color:white;

}

::-moz-selection{

    background:var(--arancio);

    color:white;

}


/*=========================================================
 SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:#005baa;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#003f7d;

}


/*=========================================================
 IMMAGINI
=========================================================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}


/*=========================================================
 ACCESSIBILITÀ
=========================================================*/

button:focus,
select:focus,
input:focus{

    outline:3px solid var(--giallo);

    outline-offset:2px;

}


/*=========================================================
  CORREZIONE MENU MOBILE + TESTATA PICCOLA
  IMPICCATO
=========================================================*/

@media (max-width: 768px){

    /*-----------------------------------------------------
      HEADER
    -----------------------------------------------------*/

    .header{

        width:100%;

        margin:10px 0 0 0;

        padding:0 12px;

        display:flex;

        align-items:center;

        justify-content:space-between;

        position:relative;

    }


    /*-----------------------------------------------------
      LOGO GIOCOSCUOLA
    -----------------------------------------------------*/

    .header img{

        max-width:65%;

        height:auto;

        max-height:70px;

    }


    /*-----------------------------------------------------
      PULSANTE ARANCIONE
    -----------------------------------------------------*/

    #btnMenu{

        display:flex !important;

        flex:0 0 50px;

        width:50px;

        height:50px;

        margin:0 5px 0 auto;

        padding:0;

        position:relative;

        z-index:10001;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:5px;

        background:#f7941d;

        border:none;

        border-radius:8px;

        box-shadow:0 3px 8px rgba(0,0,0,.25);

    }


    #btnMenu span{

        display:block;

        width:28px;

        height:4px;

        margin:0 !important;

        padding:0;

        background:#ffffff;

        border-radius:3px;

    }


    /*-----------------------------------------------------
      MENU MOBILE
    -----------------------------------------------------*/

    #menuGiocoscuola{

        display:none !important;

        position:absolute;

        top:70px;

        right:10px;

        left:auto;

        width:280px;

        margin:0;

        padding:8px;

        background:#ffffff;

        border-radius:12px;

        box-shadow:0 10px 25px rgba(0,0,0,.25);

        flex-direction:column;

        align-items:stretch;

        gap:0;

        z-index:10000;

    }


    #menuGiocoscuola.aperto{

        display:flex !important;

    }


    #menuGiocoscuola > a{

        display:block;

        width:100%;

        margin:0;

        padding:14px 10px;

        text-align:center;

        font-size:18px;

        border-bottom:1px solid #dddddd;

        border-radius:6px;

    }


    /*-----------------------------------------------------
      TENDINA MATERIALI
    -----------------------------------------------------*/

    .gc-dropdown{

        display:block;

        width:100%;

    }


    .gc-dropdown-btn{

        display:flex;

        width:100%;

        margin:0;

        padding:14px 10px;

        justify-content:center;

        align-items:center;

        font-size:18px;

        border-radius:6px;

    }


    .gc-dropdown-menu{

        position:static;

        display:none;

        transform:none;

        width:100%;

        margin:0;

        padding:0;

        background:#f4f8fc;

        box-shadow:none;

        border-radius:6px;

    }


    .gc-dropdown.aperto .gc-dropdown-menu{

        display:block;

    }


    .gc-dropdown-menu a{

        display:block !important;

        width:100%;

        margin:0 !important;

        padding:11px 8px !important;

        font-size:15px !important;

        text-align:center;

        white-space:normal;

        border-bottom:1px solid #dddddd;

    }


    /*-----------------------------------------------------
      TESTATA PICCOLA
    -----------------------------------------------------*/

    #headerGiocoscuola{

        width:100%;

        margin:10px auto;

        padding:0;

    }


    #headerGiocoscuola img{

        content:url(
            "https://www.giocoscuola.it/imgs/testatapiccola.png"
        );

        display:block;

        width:100%;

        height:auto;

        border-radius:12px;

    }

}



/*=========================================================
 FINE VERSIONE 3.0
=========================================================*/