:root{
  --bg:#0d1117;
  --accent:#06b6d4;
}

/* ===== RESET ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  image-rendering:pixelated;
}

html,body{
  height:100%;
  background:var(--bg);
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  user-select:none;
  overflow:hidden;
}

/* ===== CONTAINER PRINCIPAL ===== */
body{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ===== WRAPPER DO JOGO ===== */
#gameWrap{
  position:relative;
  width:960px;
  height:540px;
  margin-top:20px;
  overflow:hidden;
  border-radius:6px;
  box-shadow:0 12px 45px rgba(0,0,0,.75);
}

/* ===== CENÁRIO ===== */
#cenario{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.95);
  z-index:0;
}

/* ===== CANVAS ===== */
canvas{
  position:absolute;
  top:0;
  left:0;
  background:transparent;
  border:4px solid #071a23;
  z-index:1;
}

/* ===== BANDEIRA (PRONTA PARA USO FUTURO) ===== */
#bandeira{
  position:absolute;
  width:48px;
  height:64px;
  bottom:80px;
  left:900px;
  background:url('../img/bandeira.png') no-repeat center/cover;
  z-index:2;
  animation:tremular 1.1s infinite ease-in-out alternate;
}

@keyframes tremular{
  0%{ transform:translateX(0); }
  50%{ transform:translateX(3px); }
  100%{ transform:translateX(0); }
}

/* ===== CRÉDITOS ===== */
.credits{
  margin-top:10px;
  font-size:13px;
  opacity:.75;
}

/* ===== RESPONSIVO (ESCALA SEM QUEBRAR A CÂMERA) ===== */
@media (max-width: 1000px){
  #gameWrap{
    transform:scale(.9);
  }
}

@media (max-width: 900px){
  #gameWrap{
    transform:scale(.8);
  }
}
.explosion {
  position: absolute;
  width: 90px;
  height: 90px;
  pointer-events: none;
  border-radius: 50%;
  animation: boom 0.55s cubic-bezier(0.25, 0.1, 0.2, 1) forwards;
  opacity: 1;

  /* núcleo + borda + glow */
  background:
    radial-gradient(circle, rgba(255,255,200,1) 0%, rgba(255,200,100,0.95) 20%, rgba(255,140,0,0.8) 40%, rgba(255,80,20,0.55) 60%, transparent 80%),
    radial-gradient(circle, rgba(255,240,150,0.6) 0%, transparent 70%);
  filter: brightness(1.3) contrast(1.2) blur(0.5px);
}

/* Shockwave externo */
.explosion::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid rgba(255,200,100,0.75);
  animation: shockwave 0.55s ease-out forwards;
  pointer-events: none;
  filter: blur(0.8px);
  opacity: 0.9;
}

@keyframes boom {
  0% {
    transform: scale(0.4);
    opacity: 1;
    filter: brightness(1.4) blur(1px);
  }
  40% {
    transform: scale(1.6);
    opacity: 1;
    filter: brightness(1.6) blur(2px);
  }
  80% {
    transform: scale(2.8);
    opacity: 0.7;
    filter: brightness(1.3) blur(3px);
  }
  100% {
    transform: scale(3.3);
    opacity: 0;
    filter: brightness(1.0) blur(5px);
  }
}

@keyframes shockwave {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }
  70% {
    transform: scale(2.4);
    opacity: 0.4;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}