/* ==========================================================================
   1. RESET, COMPACTAÇÃO DE TOPO E CORREÇÕES DO NAVEGADOR
   ========================================================================== */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box !important; 
}

body { 
  font-family: sans-serif; 
  background: #fff; 
  color: #333; 
  display: flex; 
  justify-content: center; 
  align-items: start;
  min-height: 100vh;
  padding: 10px !important; 
  overflow-x: hidden;
}

.game-container { 
  width: 100% !important; 
  max-width: 400px !important; 
  display: flex; 
  flex-direction: column; 
  gap: 10px !important; 
  margin: 0 auto !important;
}

.game-layout { 
  display: flex !important;
  flex-direction: column !important; 
  gap: 12px !important; 
}

/* ==========================================================================
   2. A GRADE DE LETRAS (12X12 AUTOMÁTICA)
   ========================================================================== */
.grid-container { 
  position: relative; 
  user-select: none; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  width: 100% !important;
}

.word-search-grid { 
  display: grid !important; 
  grid-template-columns: repeat(12, 1fr) !important; 
  width: 100% !important; 
  max-width: clamp(240px, calc(100vh - 240px), 400px) !important;
  aspect-ratio: 1 / 1 !important; 
  background: #000080; 
  border: 3px solid #000080; 
  gap: 1px !important; 
  border-radius: 4px; 
  cursor: pointer; 
  touch-action: none; 
  margin: 0 auto !important;
  height: auto !important;
}

.grid-cell { 
  background: #fffcce; 
  aspect-ratio: 1 !important; 
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important; 
  font-weight: bold !important; 
  color: #000080; 
  user-select: none; 
  -webkit-user-select: none; 
  font-size: clamp(12px, 3.8vw, 17px) !important;
}

.grid-cell.highlighted { 
  background: #bfe3ff !important; 
}

.grid-cell.permanently-found { 
  background: #a3e2a5 !important; 
  color: #155724 !important; 
}

/* ==========================================================================
   3. CAIXA E LISTA DE PALAVRAS (MODELO RESPONSIVO)
   ========================================================================== */
.word-list-box { 
  background: #fff3cd; 
  border: 2px solid #ffcd39; 
  padding: 10px !important; 
  border-radius: 5px; 
  width: 100% !important;
}

.word-list-box h3 { 
  margin-top: 0; 
  color: #000080; 
  font-size: 1rem !important; 
  border-bottom: 2px solid #ffcd39; 
  padding-bottom: 3px; 
  text-transform: uppercase; 
  text-align: center;
}

.word-list-box div:not(h3) {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  padding-top: 5px;
}

.word-item { 
  font-weight: bold; 
  font-size: clamp(11px, 2.8vw, 13px) !important;
  color: #000080; 
  margin: 0 !important; 
  text-transform: uppercase;
  background: rgba(255,255,255,0.6);
  padding: 2px 6px;
  border-radius: 3px;
}

.word-item.found { 
  color: #28a745 !important; 
  text-decoration: line-through; 
  opacity: 0.6; 
  background: #d4edda;
}

/* ==========================================================================
   4. PAINEL DE BOTÕES DE CONTROLE
   ========================================================================== */
.buttons-panel { 
  text-align: center; 
  display: flex; 
  gap: 6px !important; 
  justify-content: center; 
  margin-top: 5px !important; 
}

.btn { 
  flex: 1 !important; 
  color: white !important; 
  padding: 8px 4px !important; 
  border: none; 
  font-weight: bold; 
  border-radius: 4px; 
  cursor: pointer; 
  font-size: clamp(10px, 2.5vw, 13px) !important;
}

.btn-new { background-color: #000080 !important; }
.btn-solve { background-color: #dc3545 !important; }
.btn:hover { opacity: 0.85; }

/* ==========================================================================
   5. CRÉDITOS COMPACTOS DO PORTAL
   ========================================================================== */
.game-credits { 
  display: block; 
  width: 100%; 
  margin-top: 15px !important; 
  text-align: center; 
  font-size: 0.78rem !important; 
  color: #733; 
  line-height: 1.4; 
}