*{
  box-sizing:border-box;
}

body{
  margin:0;
  height:100vh;
  background:url('assets/bkpc.gif') no-repeat center/cover;
}

/* ========================= */
/* 🖥 CONFIGURACIÓN PC */
/* ========================= */

.game-area{
  position:relative;
  width:100%;
  height:100%;
}

/* 🔥 FUEGO PC */
.fuego{
  position:absolute;
  top:47%;
  left:49%;
  transform:translateX(-50%);
  width:23%;
  pointer-events:none;
}

/* 🍗 CRUDOS PC */
.crudos{
  position:absolute;
  top:70%;
  left:11%;
  display:flex;
  gap:8px;
}

/* 🍽 COCIDOS PC */
.cocidos{
  position:absolute;
  top:70%;
  right:20%;
  display:flex;
  gap:8px;
}

/* 🔥 ASADOR PC */
.asador{
  position:absolute;
  top:20%;
  left:47%;
  transform:translateX(-56%);
  width:30%;
  height:59%;
}

.slot{
  position:absolute;
}

.pollo{
  width:9vw;
}


/* ========================= */
/* 📱 CONFIGURACIÓN CELULAR */
/* ========================= */

@media(max-width:768px){

  body{
    background:url('assets/bkcel.gif') no-repeat center/cover;
  }

  .fuego{
    top:48%;
    left:47%;
    width:49%;
  }

  .crudos{
    top:68%;
    left:0%;
  }

  .cocidos{
    top:68%;
    right:1%;
  }

  .asador{
    top:31%;
    width:80%;
    height:35%;
  }

  .pollo{
    width:24vw;
  }

  /* 📱 POSICIÓN SCORE (EDITABLE) */
  .score-text{
    bottom:50%;   /* 🔧 EDITA PARA CELULAR */
    font-size:18vw;
  }

}


/* ========================= */
/* 🪟 POPUPS */
/* ========================= */

.popup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.85);
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  z-index:999;
}

.popup-img{
  max-width:80%;
}

/* 🔥 SCORE SOBRE IMAGEN */
.score-text{
  position:absolute;
  bottom:31%;   /* 🔧 EDITA PARA PC */
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-size:6vw;
  font-weight:bold;
  text-shadow:2px 2px 5px #000;
}

.btn{
  margin-top:10px;
  padding:10px 20px;
  font-size:16px;
  cursor:pointer;
}

.slot-cocido{
  width:80px;
  height:80px;
  display:inline-block;
}

.formulario{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.formulario input{
  padding:10px;
  font-size:16px;
  border:none;
  border-radius:5px;
}