/* ==========================================
   GIOCOSCUOLA - SHOOTING GAME
   ========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ==========================================
   PAGINA
   ========================================== */

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;

    background: #dfefff;

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

    color: #003366;
}


/* ==========================================
   CONTENITORE PRINCIPALE
   ========================================== */

#contenitore {

    width: 100%;

    margin: 10px auto;

    padding: 15px;

    border-radius: 8px;

    background-color: #ffffff;

    background-image: url("https://www.giocoscuola.it/imgs/sfondo.png");

    background-repeat: repeat;

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

}


/* ==========================================
   TITOLI
   ========================================== */

h1,
h2,
h3 {

    color: #005baa;

    text-align: center;

}


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

.header {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-start;

    justify-content: space-between;

    width: 100%;

    padding-bottom: 10px;

    margin-bottom: 15px;

}


/* ==========================================
   LOGO
   ========================================== */

.header > a:first-child {

    flex: 0 0 auto;

}

.header > a:first-child img {

    width: 300px;

    max-width: 100%;

    height: auto;

    display: block;

    margin-right: 200px;

}


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

#menuGiocoscuola {

    flex: 1;

    text-align: right;

    padding-top: 20px;

    margin-right: 20px;

}


#menuGiocoscuola a {

    display: inline-block;

    padding: 8px 12px;

    margin-left: 5px;

    color: #005baa;

    text-decoration: none;

    font-weight: bold;

    font-size: 20px;

    font-family: "Comic Sans MS", Arial, sans-serif;

    transition: .25s;

}


#menuGiocoscuola a:hover {

    background: #005baa;

    color: white;

    border-radius: 6px;

}


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

#headerGiocoscuola {

    width: 100%;

    margin-top: 10px;

    clear: both;

}


#headerGiocoscuola img {

    width: 100%;

    max-width: 100%;

    height: auto;

    display: block;

    border-radius: 8px;

}


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

#btnMenu {

    display: none;

    width: 65px;

    height: 55px;

    background: #f7941d;

    border: none;

    border-radius: 8px;

    cursor: pointer;

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

    padding: 10px;

}


#btnMenu span {

    display: block;

    width: 28px;

    height: 4px;

    background: #ffffff;

    margin: 5px auto;

    border-radius: 3px;

    transition: .3s;

}


#btnMenu:hover {

    background: #e67e00;

}


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

#contenitoregioco {

    position: relative;

    width: 100%;

    min-height: 700px;

    margin: 0 auto;

    padding: 20px;

    text-align: center;

    background: transparent;

}


#contenitoregioco > h2 {

    margin: 10px 0 15px;

    font-size: 32px;

}


/* ==========================================
   CANVAS
   ========================================== */

canvas {

    display: block;

    width: 100%;

    height: auto;

    touch-action: none;

}


/* ==========================================
   PUNTEGGIO
   ========================================== */

#punteggio {

    position: absolute;

    top: 25px;

    left: 30px;

    z-index: 20;

    padding: 8px 15px;

    background: rgba(255, 255, 255, .90);

    border-radius: 10px;

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

    color: #005baa;

    font-size: 20px;

    font-weight: bold;

}


#score {

    color: #f7941d;

    font-size: 24px;

}


/* ==========================================
   SCHERMATA INIZIALE
   ========================================== */

#startingUI {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    min-height: 700px;

    z-index: 50;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 30px;

    background: rgba(223, 239, 255, .92);

}


/* ==========================================
   PANNELLO INIZIALE
   ========================================== */

#pannelloInizio {

    width: 100%;

    max-width: 600px;

    padding: 30px;

    background: #ffffff;

    border-radius: 15px;

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

    text-align: center;

}


#titoloGioco {

    margin-bottom: 20px;

    color: #005baa;

    font-size: 38px;

}


#score2 {

    margin: 5px 0;

    color: #005baa;

    font-size: 42px;

}


.etichettaPunti {

    margin-bottom: 25px;

    color: #555555;

    font-size: 18px;

}


/* ==========================================
   SELETTORI
   ========================================== */

.selettore {

    margin: 15px 0;

    text-align: left;

}


.selettore label {

    display: block;

    margin-bottom: 6px;

    color: #005baa;

    font-size: 18px;

    font-weight: bold;

}


.selettore select {

    width: 100%;

    padding: 12px;

    border: 1px solid #cccccc;

    border-radius: 8px;

    background: #ffffff;

    color: #333333;

    font-size: 18px;

}


/* ==========================================
   PULSANTE INIZIA
   ========================================== */

#startBtn {

    width: 100%;

    margin-top: 15px;

    padding: 14px 24px;

    border: none;

    border-radius: 10px;

    background: #f7941d;

    color: #ffffff;

    font-size: 20px;

    font-weight: bold;

    cursor: pointer;

    transition: .2s;

}


#startBtn:hover {

    background: #e67e00;

    transform: scale(1.03);

}


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

#footer {

    width: 100%;

    margin-top: 20px;

    padding: 12px;

    background-color: #87F773;

    color: #003366;

    font-size: 14px;

    text-align: center;

}


#footer p {

    margin: 8px 0;

}


#footer a {

    color: #003366;

    text-decoration: none;

    font-weight: bold;

}


#footer a:hover {

    text-decoration: underline;

}


#footer img {

    vertical-align: middle;

}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 900px) {

    .header > a:first-child img {

        margin-right: 20px;

    }

    #menuGiocoscuola a {

        font-size: 18px;

    }

}


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

@media (max-width: 768px) {


    #contenitore {

        margin: 0;

        padding: 8px;

        border-radius: 0;

    }


    /* HEADER */

    .header {

        flex-direction: column;

        align-items: center;

    }


    .header > a:first-child img {

        width: 280px;

        margin: 0 auto 10px auto;

    }


    /* MENU */

    #btnMenu {

        display: block;

        margin: -60px 15px 15px auto;

        color: #ffffff !important;

    }


    #menuGiocoscuola {

        display: none;

        width: 100%;

        margin: 0;

        padding: 0;

        text-align: center;

    }


    #menuGiocoscuola.aperto {

        display: block;

    }


    #menuGiocoscuola a {

        display: block;

        width: 100%;

        margin: 0;

        padding: 16px;

        border-bottom: 1px solid #dddddd;

        background: #ffffff;

        font-size: 22px;

        text-align: center;

    }


    #menuGiocoscuola a:hover {

        background: #f7941d;

        color: #ffffff;

    }


    /* BANNER */

    #headerGiocoscuola img {

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

        width: 100%;

        height: auto;

    }


    /* AREA GIOCO */

    #contenitoregioco {

        min-height: 600px;

        padding: 10px;

    }


    #contenitoregioco > h2 {

        font-size: 26px;

    }


    /* PANNELLO INIZIALE */

    #startingUI {

        min-height: 600px;

        padding: 15px;

    }


    #pannelloInizio {

        padding: 22px;

    }


    #titoloGioco {

        font-size: 30px;

    }


    #score2 {

        font-size: 36px;

    }


    /* PUNTEGGIO */

    #punteggio {

        top: 15px;

        left: 15px;

        font-size: 16px;

    }


    #score {

        font-size: 20px;

    }


    /* FOOTER */

    #footer {

        font-size: 12px;

    }

}


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

@media (max-width: 600px) {


    #pannelloInizio {

        padding: 18px;

    }


    #titoloGioco {

        font-size: 26px;

    }


    #score2 {

        font-size: 32px;

    }


    .selettore label {

        font-size: 16px;

    }


    .selettore select {

        font-size: 16px;

        padding: 10px;

    }


    #startBtn {

        font-size: 18px;

        padding: 12px;

    }

}
/* ==========================================
   MODALITÀ GIOCO
   ========================================== */

body.giocoAttivo .header,
body.giocoAttivo #headerGiocoscuola,
body.giocoAttivo #footer,
body.giocoAttivo #contenitoregioco > h2 {
    display: none;
}

body.giocoAttivo #contenitore {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    background: none;
}

body.giocoAttivo #contenitoregioco {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
}

body.giocoAttivo canvas {
    display: block;
}
/* =========================================================
   CLASSIFICA METEOR
   ========================================================= */

#classificaMeteor {
    width: 90%;
    max-width: 900px;
    margin: 35px auto 50px auto;
    padding: 25px 30px;
    box-sizing: border-box;
    text-align: center;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}


/* Titolo */

#classificaMeteor h2 {
    margin: 0 0 18px 0;
    color: #0568b3;
    font-size: 30px;
}


/* Messaggio inserimento nome */

#salvaRisultatoMeteor {
    margin: 10px auto 20px auto;
}


#salvaRisultatoMeteor p {
    margin: 8px 0 15px 0;
    font-size: 18px;
}


/* Campo nome */

#nomeGiocatoreMeteor {
    width: 220px;
    padding: 10px 12px;
    margin-right: 6px;
    border: 1px solid #bbb;
    border-radius: 7px;
    font-size: 16px;
    box-sizing: border-box;
}


/* Pulsanti */

#classificaMeteor button {
    padding: 10px 18px;
    border: none;
    border-radius: 7px;
    background: #0568b3;
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin: 5px;
}


#classificaMeteor button:hover {
    opacity: 0.9;
}


/* Elenco classifica */

#elencoClassificaMeteor {
    margin: 20px auto 0 auto;
    max-width: 600px;
    text-align: left;
}


#elencoClassificaMeteor h3 {
    margin: 10px 0 15px 0;
    text-align: center;
    color: #0568b3;
    font-size: 24px;
}


#elencoClassificaMeteor ol {
    margin: 0;
    padding-left: 40px;
}


#elencoClassificaMeteor li {
    padding: 8px 10px;
    margin-bottom: 5px;
    font-size: 18px;
    border-bottom: 1px solid #ddd;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #classificaMeteor {
        width: 94%;
        padding: 20px 15px;
        margin-top: 25px;
    }


    #classificaMeteor h2 {
        font-size: 26px;
    }


    #nomeGiocatoreMeteor {
        width: 90%;
        margin: 5px auto;
    }


    #classificaMeteor button {
        display: block;
        margin: 8px auto;
    }


    #elencoClassificaMeteor li {
        font-size: 16px;
    }

}