<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 da velha */
.alm-container { 
  text-align: center; 
  color: #555; 
  background-color: #0066CC; 
  padding: 10px; 
  border-radius: 10px; 
  margin: 0px auto; /* Removida a duplicidade desta linha */
  width: fit-content; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Corrigido o formato do box-shadow */
}

.jogo {
  display: flex;             /* Transforma em flex para centralizar o tabuleiro */
  justify-content: center;   /* Centraliza horizontalmente */
  align-items: center;       /* Centraliza verticalmente */
  background-color: #ffd700;
  padding: 20px;
}

.tabuleiro {
  display: grid;
  /* Ajustado para 60px para casar exatamente com o tamanho da célula */
  grid-template-columns: repeat(3, 60px); 
  grid-gap: 10px;            /* Um espaço um pouco maior melhora o visual */
  margin: 0;                 /* Deixando o controle de margem para o container .jogo */
  justify-content: center;   /* Garante a centralização do grid como um todo */
  align-content: center;     /* Garante a centralização vertical das linhas */
}

.celula { 
  width: 60px; 
  height: 60px; 
  background-color: #fff; 
  border: 2px solid #333;         
  font-size: 32px;        
  font-weight: bold;       
  border-radius: 50%; /* Se preferir o visual quadrado tradicional, mude para 8px ou remova */
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  transition: background-color 0.3s; 
}

.celula:hover {
  background-color: #eee;
}

.celula.vencedor {
  background-color: #aaffaa;
}

/* Controles */
.controles {
  margin-top: 15px; 
  display: flex; 
  gap: 10px; 
  justify-content: center; 
}

.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; 
}

#status {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}

h4 {
    font-weight: bold;
    font-size: 28px;
    margin-top: 2px;
    margin-bottom: 4px;
}

ul.lista-espacada li { 
  margin-bottom: 5px; 
}
</style>

