*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(135deg,#f0c27b,#4b1248);
  font-family:Arial, Helvetica, sans-serif;
}

.container{
  width:95%;
  max-width:380px;
  text-align:center;
}

h1{
  color:#fff;
  margin-bottom:10px;
}

.scoreBoard{
  background:rgba(0,0,0,0.6);
  color:#fff;
  padding:10px;
  border-radius:12px;
  margin-bottom:10px;
}

.grid{
  width:100%;
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:5px;
  padding:6px;
  background:rgba(255,255,255,0.2);
  border-radius:15px;
}

.grid div{
  width:100%;
  aspect-ratio:1/1;
  background-size:cover;
  background-position:center;
  border-radius:12%;
  cursor:pointer;
  position:relative;
}

.selected{
  outline:3px solid #fff;
}

.star{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:gold;
  font-size:1.2rem;
  animation:float 0.8s ease-out forwards;
  pointer-events:none;
}

@keyframes float{
  from{opacity:1; transform:translate(-50%,-50%)}
  to{opacity:0; transform:translate(-50%,-90%)}
}