#container{
width:300px;
margin:0px auto;
text-align:center;
}

#wrapper{
width:100%;
display:inline-block;
text-align:center;
display: flex;
flex-direction: column;
justify-content: space-between;

background-color: rgba(0, 0, 0, 0.8);
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

#istruzioni{
width:300px;
height:500px;
background-image:url('istruzioni.png');
}

#bandiera{
width:300px;
height:200px;
}

body{

background-image:url('carbon.png');
color:white;
font-family:sans-serif;
}

#header{
border-top-left-radius:10px;
border-top-right-radius:10px;
}

#livellonumero{
font-size:28px;
font-weight:bold;
color:#fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 30px;
}

#inizia{
cursor:pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,9fd8ef+51,2ab0ed+100;Blue+Gloss+%235 */
background: rgb(228,245,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(50%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
color:black;

padding:1em 0px;
font-size:1.2em;
font-weight:600;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

#gioca{
cursor:pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,9fd8ef+51,2ab0ed+100;Blue+Gloss+%235 */
background: rgb(228,245,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(50%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
color:black;
width:300px;
padding:1em 0px;
font-size:1.2em;
font-weight:600;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
line-height:1.2em;
}

.vita{
display:inline-block;
background-color:darkgreen;
padding:0.5em;
color:white;
border-radius:100%;
line-height:1em;
margin:1em 0.3em;
text-align:center;
box-shadow:2px 2px 2px black;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #ff6b6b;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
font-weight: bold;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}

.vita:hover {
  transform: scale(1.1);
}

#vitewrapper{
text-align:left;
font-size:1.2em;
background-color:#36B4ED;
padding-left:20px;
display: flex;
align-items: center;
padding: 15px 20px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px;
margin: 0 20px;
}

#gamewrapper{
background-color:black;


flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px 0;
padding: 20px;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 10px;
}

.risposta{
width:120px;
height:80px;
object-fit:cover;
border-radius:8px;
box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);
transition:transform 0.3s ease, box-shadow 0.3s ease;
cursor:pointer;
}

.risposta:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

#domanda {
  font-size: 24px;
  color: white;
  margin-bottom: 30px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#prossimolivello{
cursor:pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,9fd8ef+51,2ab0ed+100;Blue+Gloss+%235 */
background: rgb(228,245,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(50%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
color:black;
width:300px;
padding:1em 0px;
font-size:1.2em;
font-weight:600;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
line-height:1.2em;
}

#showtopten{
cursor:pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,9fd8ef+51,2ab0ed+100;Blue+Gloss+%235 */
background: rgb(228,245,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(50%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
color:black;
width:300px;
padding:1em 0px;
font-size:1.2em;
font-weight:600;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
line-height:1.2em;
}

#rigioca{
cursor:pointer;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e4f5fc+0,bfe8f9+50,9fd8ef+51,2ab0ed+100;Blue+Gloss+%235 */
background: rgb(228,245,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(50%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
color:black;
width:300px;
padding:1em 0px;
font-size:1.2em;
font-weight:600;
line-height:1.2em;
}


#life{
height:223px;
background-image:url('vita.png');
margin:1em auto;
}

#loose{
width:250px;
height:200px;
background-image:url('loose.png');
margin:1em auto;
}

#win{
width:250px;
height:200px;
background-image:url('win.png');
margin:1em auto;
}

.riga{
width:280px;
padding:1em 10px;
text-align:left;
}

.numero{
display:inline-block;
font-size:0.8em;
width:10%;
}

.nome{
display:inline-block;
font-size:0.8em;
width:80%;
}

.punteggio{
float:right;
font-size:0.8em;

}

#inserisci{
display:block;
font-size:1.2em;
padding:0.5em;
width:200px;
background-color:white;
color:black;
border-radius:10px;
margin:1em auto;
text-align:center;
}

#abbandona{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#596a72+0,cedce7+100 */
background: rgb(89,106,114); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(89,106,114,1) 0%, rgba(206,220,231,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(89,106,114,1)), color-stop(100%,rgba(206,220,231,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(89,106,114,1) 0%,rgba(206,220,231,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(89,106,114,1) 0%,rgba(206,220,231,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(89,106,114,1) 0%,rgba(206,220,231,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(89,106,114,1) 0%,rgba(206,220,231,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#596a72', endColorstr='#cedce7',GradientType=0 ); /* IE6-9 */
color:black;
width:300px;
padding:1em 0px;
font-size:1.2em;
font-weight:600;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
line-height:1.2em;
display:none;
cursor:pointer;
margin-top:1em;
}

#score{
font-size:64px;
font-weight:bold;
color:#4CAF50;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
margin: 30px 0;
}

#theend{
display:block;
width:150px;
height:150px;
margin:1em auto;
background-image:url('theend.png');
}

#vittoria{
display:block;
width:200px;
height:200px;
margin:1em auto;
background-image:url('vittoria.png');
}

/* Testi e messaggi */
.message {
  font-size: 22px;
  margin: 15px 0;
  padding: 10px 20px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.1);
}

.message.success {
  color: #4CAF50;
  background-color: rgba(76, 175, 80, 0.1);
  border-left: 4px solid #4CAF50;
}

.message.error {
  color: #ff6b6b;
  background-color: rgba(255, 107, 107, 0.1);
  border-left: 4px solid #ff6b6b;
}

/* Pulsanti */
#inizia, #prossimolivello, #abbandona, #rigioca {
  color: white;
  cursor: pointer;
  border-radius: 8px;
  font-weight: bold;
  margin: 10px 0;
  text-align: center;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  width:100%;
}

#inizia, #prossimolivello, #rigioca {
  background: linear-gradient(145deg, #4CAF50, #45a049);
}

#inizia:hover, #prossimolivello:hover, #rigioca:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  background: linear-gradient(145deg, #45a049, #4CAF50);
}

#abbandona {
  background: linear-gradient(145deg, #ff6b6b, #ff5252);
}

#abbandona:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  background: linear-gradient(145deg, #ff5252, #ff6b6b);
}

/* Animazioni */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.message, #score, #livellonumero {
  animation: fadeIn 0.5s ease-out;
}

/* Griglia delle bandiere */
.flags-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
  max-width: 100%;
}