/* =========================================================
   PÁGINA DE CLASSIFICAÇÃO ETÁRIA (regras-idade.html antiga)
   (mantida para compatibilidade)
   ========================================================= */

.age-page{
  padding-top: 16px;
  padding-bottom: 80px;
}

/* Cabeçalho da página */
.age-header{
  max-width: 780px;
  margin: 0 auto 32px;
}
.age-title{
  font-size: clamp(1.9rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: .4px;
  margin-bottom: 14px;
}
.age-intro{
  color: #D1D5DB;
  line-height: 1.7;
  font-size: 0.95rem;
  margin-bottom: 10px;
}

/* Blocos de cada faixa etária */
.age-section{
  background: #18191d;
  border-radius: 24px;
  border: 1px solid #2b2e32;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  padding: 18px 18px 20px;
  margin-bottom: 22px;
}

/* Faixinha colorida lateral */
.age-ribbon{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: linear-gradient(120deg, #16a34a, #22c55e);
  margin-bottom: 16px;
}
.age-ribbon-blue{
  background: linear-gradient(120deg, #1d4ed8, #38bdf8);
}
.age-ribbon-yellow{
  background: linear-gradient(120deg, #eab308, #facc15);
}
.age-ribbon-orange{
  background: linear-gradient(120deg, #f97316, #fb923c);
}
.age-ribbon-red{
  background: linear-gradient(120deg, #dc2626, #f97373);
}
.age-ribbon-dark{
  background: linear-gradient(120deg, #111827, #4b5563);
}

/* número grande da faixa */
.age-rank{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  font-weight: 800;
  font-size: 1rem;
}

/* texto da faixa */
.age-label{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.age-level{
  font-size: .95rem;
  font-weight: 800;
}
.age-sub{
  font-size: .82rem;
  opacity: .92;
}

/* Conteúdo interno do card */
.age-content h2{
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.age-content h3{
  font-size: 1rem;
  margin-top: 14px;
  margin-bottom: 4px;
}
.age-content h4{
  font-size: .9rem;
  margin-top: 10px;
  margin-bottom: 4px;
  color: #E5E7EB;
  text-transform: none;
}
.age-content p{
  font-size: .94rem;
  line-height: 1.65;
  color: #E5E7EB;
}
.age-content ul{
  margin-left: 18px;
  margin-bottom: 6px;
}
.age-content li{
  font-size: .9rem;
  line-height: 1.55;
  color: #D1D5DB;
  margin-bottom: 2px;
}

/* Responsivo */
@media (max-width: 640px){
  .age-section{
    padding: 16px 14px 18px;
    border-radius: 20px;
  }
  .age-title{
    font-size: 1.7rem;
  }
  .age-header{
    margin-bottom: 24px;
  }
}

/* =========================================================
   PÁGINA DE REGRAS DE USO (regras-idade.html atual)
   ========================================================= */

.rules-page{
  padding-top: 16px;
  padding-bottom: 80px;
}

/* Cabeçalho */
.rules-header{
  max-width: 780px;
  margin: 0 auto 32px;
}
.rules-title{
  font-size: clamp(1.9rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: .4px;
  margin-bottom: 14px;
}
.rules-intro{
  color: #D1D5DB;
  line-height: 1.7;
  font-size: 0.95rem;
  margin-bottom: 10px;
}

/* Card geral de cada grupo de regras */
.rules-section{
  background: #18191d;
  border-radius: 24px;
  border: 1px solid #2b2e32;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  padding: 18px 18px 20px;
  margin-bottom: 22px;
}

/* “chip” com número e título (inspirado na age-ribbon) */
.rules-chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: linear-gradient(120deg, #6366f1, #a855f7);
  margin-bottom: 16px;
}
.rules-chip-blue{
  background: linear-gradient(120deg, #1d4ed8, #38bdf8);
}
.rules-chip-yellow{
  background: linear-gradient(120deg, #eab308, #facc15);
}
.rules-chip-orange{
  background: linear-gradient(120deg, #f97316, #fb923c);
}
.rules-chip-red{
  background: linear-gradient(120deg, #dc2626, #f97373);
}
.rules-chip-purple{
  background: linear-gradient(120deg, #7c3aed, #ec4899);
}
.rules-chip-teal{
  background: linear-gradient(120deg, #0d9488, #22c55e);
}
.rules-chip-gray{
  background: linear-gradient(120deg, #4b5563, #9ca3af);
}
.rules-chip-dark{
  background: linear-gradient(120deg, #111827, #4b5563);
}

.rules-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  font-weight: 800;
  font-size: 1rem;
}
.rules-label{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.rules-section-title{
  font-size: .95rem;
  font-weight: 800;
}
.rules-section-sub{
  font-size: .82rem;
  opacity: .92;
}

/* Corpo do card */
.rules-body h2{
  font-size: 1.05rem;
  margin-top: 8px;
  margin-bottom: 4px;
}
.rules-body h3{
  font-size: .98rem;
  margin-top: 10px;
  margin-bottom: 4px;
  color: #E5E7EB;
}
.rules-body h4{
  font-size: .9rem;
  margin-top: 8px;
  margin-bottom: 3px;
  color: #E5E7EB;
}
.rules-body p{
  font-size: .94rem;
  line-height: 1.65;
  color: #E5E7EB;
  margin-bottom: 6px;
}
.rules-body ul{
  margin-left: 18px;
  margin-bottom: 6px;
}
.rules-body li{
  font-size: .9rem;
  line-height: 1.55;
  color: #D1D5DB;
  margin-bottom: 3px;
}

/* sublista um pouco recuada */
.rules-sublist{
  margin-left: 18px;
}

/* rodapé de “última atualização” */
.rules-updated{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top: 12px;
  font-size: .9rem;
  color:#E5E7EB;
}
.rules-updated .material-symbols-outlined{
  font-size: 18px;
}

/* Responsivo */
@media (max-width: 640px){
  .rules-section{
    padding: 16px 14px 18px;
    border-radius: 20px;
  }
  .rules-title{
    font-size: 1.7rem;
  }
  .rules-header{
    margin-bottom: 24px;
  }
}