<style type="text/css">

* {
margin: 0;
padding: 0;
}

/* render html5 elements as block */
principal, quadTopo, menuTopo, logo, quadCorpo, nav, quadMobil, quadBorda, section, footer {
display: block;
}

body, html{
line-height: 38px;
background-color: #4682b4;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* Codigo responsivo */
* 
img, picture, video, embed {
 max-width:100% !important;
 height:auto !important;
}

/* header */
header {
 height: auto;
 margin: 0px;
}

/* Envolve tudo */
.principal{
  max-width: 900px;
  min-width: auto;
  background: #086a87;
  margin: 0 auto;
  padding: 5px;
  border-radius: 6px;
  clear: both;
}
/* ***** Submenu - por Almeida ***** */
.quadLogo {
  background-color: #000;
  padding: 22px;
  text-align: center;
  font-size: 32px;
  font-style: italic;
  font-weight: bold;
  color: white;
}
/* Centralizar o topo e deixar em itálico */
.quadTopo {
  text-align: center;
  font-style: italic;
  background-color: #125103;
  border-top: 4px solid #ddd;
  border-bottom: 4px solid #ddd;
  font-size: 25px;
  color: white;
}
.quadCorpo {
  background-color: #fff;
  width: auto;
  padding: 20px;
  font-size: 25px;
  color: #000;
}
.quadBase {
  text-align: center;
  font-style: italic;
  background-color: #125103;
  border-top: 4px solid #ddd;
  border-bottom: 4px solid #ddd;
}
/* ***** Menu do responsivo verde ***** */
.menu {
  background-color: #125103;
  font-size: 25px;
  color: #fff;
  padding: 15px;
  text-align: center;
  width: auto;
  display: block;
  clear: both;
}
.menu ul {
  margin: 10px;
  padding: 0;
  list-style: none;
}
.menu ul li{
  display:inline-block;
}
.menu a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.menu ul li a {
  display: block;   
  color: #fff;
}
a:link {color:#000}
a:visited {color:#000}
a:hover {color:#0000ff}

/* ***** Classes - por Almeida ***** */
.but-base {
  width: auto;
  padding: 15px;
  text-align: center;
  display: inline-block;
  background-color: #ddd;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 22px;
  color: #555;
  border: 2px solid #003399;
  border-radius: 6px;
  box-shadow: 1px 1px 4px #999;
}
.but01 { background-color: #ddd; color: #555; text-align: center; }
.but02 { background-color: #b0e0e6; color: #555; text-align: left; }
.but03 { background-color: #fafafa; color: #555; }
.but04 { background-color: #9acd32; color: #555; }
.but05 { background-color: #ddd; color: #555; }

/* ***** Resta Um ***** */
/* CSS Integrado */
.restaum-container { 
   text-align: center; 
   font-size: 22px;
   font-family: Verdana, sans-serif; 
   color: white; background: #0066CC; 
   padding: 15px; 
   border-radius: 10px; 
   width: fit-content; margin: auto; 
}
.grid-restaum { 
   display: grid; 
   grid-template-columns: repeat(7, 20px); 
   grid-gap: 5px; 
   justify-content: center; 
   margin: 20px 0; 
}
.celula { 
   width: 20px; 
   height: 20px; 
   border-radius: 50%; 
   display: flex; 
   align-items: center; 
   justify-content: center; 
   cursor: pointer; 
   transition: 0.2s; 
}
/* Estados das Peças */
.pino { 
   background-color: #f1c40f; 
   border: 2px solid #d4ac0d; 
   box-shadow: inset -2px -2px 5px rgba(0,0,0,0.3); 
}
.vazio { 
   background-color: #004a94; 
   border: 1px inset #003366; 
}
.invisivel { 
   visibility: hidden; 
}
.selecionado { 
   background-color: #e74c3c !important; 
   transform: scale(1.1); 
}
.controles { 
  margin-top: 15px; 
  display: flex; gap: 5px; 
  justify-content: center; 
} 
/* Botões */   
button, select { 
  padding: 8px; 
  cursor: pointer; 
  border-radius: 5px; 
  border: none; 
  font-weight: bold; 
}
button:disabled { 
  opacity: 0.5; 
  cursor: not-allowed; 
}
.btn-solve { 
  background-color: #27ae60; 
  color: white; 
}
.btn-solve:hover { 
  background-color: #2ecc71; 
}
.tabuleiro-titulo  {
 min-height: 20px; 
 margin-top: 10px; 
 color: #ffeb3b; 
}
#status-msg {
 min-height: 20px; 
 margin-top: 10px; 
 color: #ffeb3b; 
}

h3 {
 font-size: 28px;
 font-weight: bold;
 margin-top: 2px;
 margin-bottom: 4px;
}
.button-jogar { 
  display: inline-flex; /* Melhor para alinhar texto e ícones internamente */
  align-items: center; 
  background-color: blue; 
  padding: 10px 20px;
  border-radius: 8px; 
  font-size: 25px; 
  font-weight: bold; 
  color: white; 
  cursor: pointer; 
  transition: 0.3s; 
  border: none;
}
.button-jogar:hover { 
  background-color: purple; 
}

.button-jogar:disabled { 
  background-color: #999; 
  cursor: not-allowed; 
}
ul.lista-espacada li { 
  margin-bottom: 5px; 
}
</style>

