/* ===== PÁGINA JOGO QUADRADO — Paleta/Texto ===== */
.jq-area{
  color: #1a1a1a;
}
.jq-area p,
.jq-area li,
.jq-area small{
  color: #333;
  line-height: 1.6;
}
.jq-area h2,
.jq-area h3{
  color: #0b1020;
}
.jq-area a{
  color: #0ea5e9;
  text-decoration: none;
}
.jq-area a:hover{
  color: #0369a1;
}
.titulo-jogo{
  margin: 24px 0 12px;
  text-align: center;
}
.titulo-jogo h2{
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 3vw + 1rem, 2.4rem);
  background: linear-gradient(90deg, #22d3ee, #0ea5e9); /* ← troque as cores */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* só o H2 é transparente por causa do degradê */
  letter-spacing: .5px;
}
.titulo-jogo p{
  margin: 0;
  color: #555;
}
.jq-area .game{
  position: relative;      /* base para centralizar o overlay */
  height: 260px;           /* ← mude a altura do campo */
  background: linear-gradient(#e3f1ff, #d7ebff);
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  margin: 12px 0;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.jq-area .rain{
  position: absolute;
  inset: 0;                /* cobre toda a área do jogo */
  pointer-events: none;    /* não bloqueia clique/toque */
}
.jq-area .rain .drop{
  position: absolute;
  top: -20px;             /* nasce acima */
  width: 2px;             /* ← espessura da gota */
  height: 12px;           /* ← comprimento da gota */
  background: rgba(14,165,233,.85);
  border-radius: 1px;
  animation: raindrop linear infinite;
  filter: blur(.2px);
  opacity: .9;
}
@keyframes raindrop{
  to{ transform: translateY(320px); } /* ← distância da queda */
}
.jq-area .player{
  position: absolute;
  left: 30px;
  bottom: 80px;           /* “altura do chão” do jogador  */
  width: 32px;            /* tamanho do jogador */
  height: 32px;           /* tamanho do jogador */
  background: #22d3ee;
  border-radius: 6px;
  box-shadow: 0 6px 12px rgba(34,211,238,.35);
  transition: transform .08s ease;
}
.jq-area .player.is-jumping{
  transform: translateY(-2px);
}
.jq-area .obstacle{
  position: absolute;
  left: 620px;            /* começa à direita (o JS move) */
  bottom: 80px;           /* MESMA altura do chão do jogador */
  border-radius: 6px;
  box-shadow: 0 6px 12px rgba(0,0,0,.15);
}
.jq-area .obstacle.t1{
  width: 40px; height: 22px;
  background: linear-gradient(#a78bfa, #7c3aed);
}
.jq-area .obstacle.t2{
  width: 24px; height: 34px;
  background: linear-gradient(#fb7185, #f43f5e);
}
.jq-area .obstacle.t3{
  width: 16px; height: 46px;
  background: linear-gradient(#34d399, #059669);
}
.jq-area .obstacle.t4{
  width: 28px; height: 28px;
  background: radial-gradient(circle at 30% 30%, #f97316, #ea580c);
  border-radius: 50%;
  box-shadow: 0 6px 12px rgba(234,88,12,.35);
}
.jq-area .ground{
  position: absolute;
  left: 0; right: 0;
  bottom: 60px;           /* um pouco abaixo do bottom real (80px) */
  height: 6px;
  background: linear-gradient(90deg, #3fb950, #2ea043);
}
.jq-area .placar{
  display: flex;
  gap: 10px;
  justify-content: flex-end; /* mude p/ center/left se quiser */
  align-items: center;
}
.jq-area #score{
  background: #0b1020;   /* fundo do placar */
  color: #fff;           /* texto do placar */
  padding: 4px 10px;
  border-radius: 999px;
  min-width: 40px;
  text-align: center;
}
.jq-area .btn{
  background: #22d3ee;   /* cor do botão */
  color: #001018;        /* texto do botão */
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #15bfd9;
  cursor: pointer;
  display: inline-block;
}
.jq-area .btn:hover{
  background: #1bbcd3;
}
.jq-area .overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;               /* centraliza conteúdo */
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.jq-area .overlay[hidden]{ display: none; }

.jq-area .overlay-box{
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  width: min(92%, 440px);
  text-align: center;

  display: flex;
  flex-direction: column;
  gap: 10px;  /* espaçamento interno */
}
.jq-area .overlay-box h3{ margin: 0; color:#0b1020; }
.jq-area .overlay-msg{ color:#333; }
.jq-area .overlay-hint{ color:#555; }

/* Força o botão a ficar centralizado e com largura mínima */
.jq-area .overlay-box .btn{
  align-self: center;
  min-width: 160px;
}
.explicacao h3{ color: #0b1020; }

.exercicio{
  margin-top: 32px;
  margin-bottom: 20px;
  padding: 16px;
  background: #f8fbff;
  border-left: 4px solid #22d3ee;
  border-radius: 8px;
}
.exercicio h3{
  margin-top: 0;
  color: #0b1020;
}
.exercicio ul{ margin-left: 20px; }
.exercicio li{ margin-bottom: 8px; color:#333; }
.exercicio .aviso{ margin-top: 12px; color:#555; font-style: italic; }
@media (max-width: 640px){
  .jq-area .placar{ justify-content: stretch; }
  .jq-area .btn{ flex: 1; }
}