<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; }
/* Jogo de dados */

/* Estilos do Jogo de Dados */
.card-container { 
  width: 90%; max-width: 900px; 
  background-color: #0066cc; 
  padding: 10px; 
  border-radius: 10px; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
  display: flex; 
  flex; gap: 5px; 
  margin: auto; 
  overflow: hidden;
}

/* Jogo da velha */
.card-section { 
  flex: 1; 
  border-radius: 10px;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  transition: 0.3s; 
}
.left-section { 
  background-color: #e3f2fd; 
  padding: 10px; 
  font-size: 25px; 
  font-weight: bold; color: #555;
}
.right-section { 
  background-color: #ffffcc; 
  padding: 10px; 
  font-size: 25px; 
  font-weight: bold; 
  color: #555;
}
 
/* Controle */
   .controles { margin-top: 15px; display: flex; gap: 10px; justify-content: center; }
   .button-jogar { align-items: center; background-color: blue; padding: 10px 20px; font-size: 25px; font-weight: bold; color: white; cursor: pointer; transition: 0.3s; border-radius: 8px; border: none; }
   .button-jogar:hover { background-color: purple; }
   .button-jogar:disabled { background-color: #999; cursor: not-allowed; }
   .button-zerar { align-items: center; background-color: #808080; padding: 10px 20px; font-size: 25px; font-weight: bold; color: white; cursor: pointer; transition: 0.3s; border-radius: 8px; border: none; }
    #rola-dados { max-width: 900px; margin: 2px auto; font-size: 23px; text-align: left; padding: 0 1.3em; }
   .vencedor { padding: 10px; font-size: 28px; font-weight: bold; color: #555; height: 20px; }
   .resultado { font-size: 50px; font-weight: bold; padding: 15px; background-color: #90ee90; border-radius: 10px; margin-bottom: 22px; display: inline-block; min-width: 60px; transition: transform 0.1s; }
   /* Responsividade: para telas menores, o card fica vertical */
   .agitando { transform: scale(1.1) rotate(5deg); color: #2980b9; }
   @media (max-width: 768px) {
   .card-container { flex-direction: column; }
   .left-section { border-right: none; border-bottom: 1px solid #ccc; }

h4 {
 margin: 22px;
}
/* ***** Cards section ***** */
.card-section h4 {
  margin-top: 0;
  color: #333;
}
.card-section p {
  color: #666;
}

ul.lista-espacada li { 
  margin-bottom: 5px; /* Espaço semântico e consistente */ 
}
</style>

