#slideContainer {
  height: 1000px;
  padding-bottom: 18px;
}
.cajas {
  margin-top: 313px;
}
ul.opciones {
  margin: 0px;
  width: 100%;
  gap: 15px;
}

.option,
.acierto {
  float: left;
  margin: 10px;
  border-radius: 25px;
  position: relative;
  /* width: 21%; */
}
.option img,
.acierto img {
  border-radius: 10px;
}
.option div,
.acierto div {
  background: #fff;
  color: #000;
  bottom: -1px;
  width: 150px;
  padding: 5px 10px;
  border-radius: 0px 0px 10px 10px;
  text-align: center;
}

.option,
.acierto {
  border-radius: 15px;
  width: 170px;
  height: 170px;
  border: 3px solid #fff;
}
.option.clone {
  width: 175px !important;
  height: 175px !important;
}
.option.clone div {
  width: 156px;
}
ul.opciones.zonas {
  position: relative;
  margin-top: 0px;
  /* width: 90%; */
  width: 100%;
  padding: 0px;
}
.cajaOpciones {
  background: rgba(36, 49, 96, 0.4);
  border-radius: 10px 10px 0px 0px;
  /* width: 88.3%; */
  width: 100%;
  margin: auto;
  /* margin-left: 90px; */
  padding: 5px 0px;
}
#zonasRespuesta {
  width: 100%;
}
.fondoJuego {
  width: 100%;
}
.fondoJuego img {
  width: 100%;
}
.zona-mar,
.zona-roca,
.zona-arena {
  position: absolute;
}
.zona-mar {
  /* border: 2px solid blue; */
  top: 0;
  left: 0;
  /* width: 895px; */
  width: 74.5%;
  /* height: 430px; */
  height: 74%;
}
.zona-roca {
  /* border: 2px solid grey; */
  right: 0;
  bottom: 0;
  /* width: 300px; */
  width: 25%;
  /* height: 435px; */
  height: 75%;
}
.zona-arena {
  /* border: 2px solid burlywood; */
  left: 0;
  bottom: 0;
  /* width: 895px; */
  width: 74.5%;
  /* height: 145px; */
  height: 25%;
}
.cont-siluetas {
  position: absolute;
  /* border: 2px solid red; */
  width: 100%;
  height: 100%;
  margin: auto;
  pointer-events: none;
}
.silueta img {
  width: 100%;
}
#hegalaburra {
  /* top: 10px; */
  /* left: 50px; */
  top: 1%;
  left: 4%;
  /* display: flex; */
  flex-direction: column;
}
#hegalaburra p {
  text-align: center;
}
#sardinas {
  /* top: 70px; */
  /* left: 250px; */
  top: 12%;
  left: 24%;
  flex-direction: column-reverse;
}
#sardinas p {
  margin-top: 5px;
}
#katxalotea {
  /* top: 10px; */
  /* left: 500px; */
  top: 3%;
  left: 45%;
}
#katxalotea p {
  position: absolute;
  right: 120px;
}
#atalo {
  /* top: 250px; */
  /* left: 75px; */
  top: 42%;
  left: 4%;
  flex-direction: column;
}
#atalo p {
  text-align: right;
  margin-bottom: -20px;
}
#medusa {
  /* top: 270px;
  left: 260px; */
  top: 46%;
  left: 23%;
  /* display: flex; */
  flex-direction: row-reverse;
}
#medusa p {
  margin-top: auto;
  margin-bottom: 20px;
  margin-left: 3px;
}
#marrazo {
  /* top: 270px; */
  /* left: 490px; */
  top: 46%;
  left: 43%;
  /* display: flex; */
  flex-direction: column-reverse;
}
#marrazo p {
  margin-top: -10px;
  margin-left: 30px;
  width: 30%;
}
#koral {
  /* top: 185px;
  right: 105px; */
  top: 30%;
  right: 10%;
  flex-direction: column;
}
#koral p {
  margin-left: -25px;
  margin-bottom: 10px;
}
#itsas-kabra {
  /* top: 285px; */
  /* right: 140px; */
  top: 49%;
  right: 12.5%;
  flex-direction: column;
}
#itsas-kabra p {
  margin-bottom: 5px;
}
#itsas-aingira {
  /* top: 330px; */
  /* right: 55px; */
  top: 56.5%;
  right: 4.5%;
  flex-direction: column;
}
#itsas-aingira p {
  text-align: left;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: 0px;
  width: 30%;
}
#abakantua {
  /* top: 355px; */
  /* right: 285px; */
  top: 60.5%;
  right: 26.5%;
  flex-direction: column;
}
#abakantua p {
  text-align: right;
  margin-right: -10px;
  margin-bottom: 5px;
}
#olgarroa {
  /* bottom: 35px; */
  /* right: 95px; */
  bottom: 8%;
  right: 11%;
  /* display: flex; */
  flex-direction: row-reverse;
}
#olgarroa p {
  margin-left: -10px;
}
#mihi-arraina {
  /* bottom: 45px;
  right: 340px; */
  bottom: 7.5%;
  right: 30%;
  /* display: flex; */
  flex-direction: row-reverse;
}
#mihi-arraina p {
  margin-left: -5px;
}
#mihi-arraina img {
  width: 50%;
}
#xabiroia {
  /* bottom: 15px;
  left: 450px; */
  bottom: 2%;
  left: 38.5%;
  /* display: flex; */
  flex-direction: column-reverse;
}
#xabiroia p {
  margin-top: 10px;
  margin-left: 10px;
}
#berberetxoa {
  /* bottom: 15px;
  left: 280px; */
  bottom: 2%;
  left: 25%;
  /* display: flex; */
  flex-direction: column-reverse;
}
#berberetxoa img {
  width: 45%;
  margin: auto;
}
#berberetxoa p {
  margin-top: 5px;
}
#arraia {
  bottom: 0px;
  /* left: 70px; */
  left: 6%;
  /* display: flex; */
  flex-direction: column-reverse;
}
#arraia p {
  text-align: right;
  margin-right: 5px;
  margin-top: -5px;
}
.silueta {
  /* display: flex; */
  position: absolute;
  color: #fff;
  display: none;
}

.incorrecta {
  border: 3px solid red;
}
.incorrecta img {
  border: 0px;
}
.victoria {
  display: block;
}
@media (min-width: 1px) and (max-width: 1480px) {
  .option div,
  .acierto div {
    width: 88.5%;
  }
}
@media (min-width: 1px) and (max-width: 1440px) {
  .cajaOpciones {
    width: 100%;
    margin-left: 0px;
  }
  .option div,
  .acierto div {
    /* width: 146px; */
    margin-left: -1px;
  }
}
@media (min-width: 1px) and (max-width: 1300px) {
  .option,
  .acierto {
    width: 140px;
    height: 140px;
  }
  .option div,
  .acierto div {
    width: 87.5%;
    font-size: 1rem;
  }
  .cajas {
    margin-top: 285px;
  }
  .option.clone {
    width: 145px !important;
    height: 145px !important;
  }
  .option.clone div {
    width: 88.5% !important;
  }
}
@media (min-width: 1px) and (max-width: 1024px) {
  #slideContainer {
    height: 720px;
  }
  .cajas {
    margin-top: 283px;
  }
  ul.opciones {
    gap: 0px;
  }
  .option,
  .acierto {
    width: 140px;
    height: 140px;
  }
  .option div,
  .acierto div {
    /* width: 121px; */
  }
  .clone {
    width: 150px !important;
    height: 150px !important;
  }
  .option.clone div {
    width: 133px;
  }
  #zonasRespuesta {
    overflow: hidden;
  }
  .silueta {
    transform: scale(0.7);
  }
  #koral {
    top: 25%;
    right: 9%;
  }
  #itsas-kabra {
    top: 46%;
    right: 13.5%;
  }
  #abakantua {
    top: 55.5%;
    right: 24.5%;
  }
  #olgarroa {
    bottom: 1%;
    right: 7%;
  }
  #mihi-arraina {
    bottom: 4.5%;
  }
  #xabiroia {
    bottom: 0%;
  }
  #berberetxoa {
    bottom: -1%;
  }
  #arraia {
    bottom: -4%;
  }
}
@media (min-width: 1px) and (max-width: 980px) {
  .option {
    padding: 0px;
  }
  .option,
  .acierto {
    width: 130px;
    height: 130px;
  }
  .option div,
  .acierto div {
    width: 86.5%;
    font-size: 0.9rem;
  }
  .option.clone {
    width: 135px !important;
    height: 135px !important;
  }
  .cajas {
    margin-top: 275px;
  }
}
@media (min-width: 1px) and (max-width: 870px) {
  .option,
  .acierto {
    width: 110px;
    height: 110px;
  }
  .option div,
  .acierto div {
    width: 84.5%;
    font-size: 0.8rem;
  }
  .option.clone {
    width: 115px !important;
    height: 115px !important;
  }
  .option.clone div {
    width: 86.5% !important;
  }
  .cajas {
    margin-top: 255px;
  }
}
@media (min-width: 1px) and (max-width: 768px) {
  #slideContainer {
    height: 720px;
  }
  .cajas {
    margin-top: 324px;
  }
  .cont-ronda {
    padding-bottom: 30px;
  }
  ul.opciones {
    display: flex;
    overflow-x: auto;
    width: 100%;
    flex-wrap: nowrap;
    /* padding-left: 215px; */
    justify-content: flex-start;
    align-items: flex-start;
  }

  ul.opciones::-webkit-scrollbar {
    /* color: #555; */
    height: 15px;
  }

  ul.opciones::-webkit-scrollbar-track:horizontal {
    background-color: transparent; /* Color de fondo de la pista */
  }

  ul.opciones::-webkit-scrollbar-thumb:horizontal {
    background-color: #888; /* Color del pulgar/deslizador */
    border-radius: 10px; /* Bordes redondeados del pulgar */
    height: 5px;
  }

  ul.opciones::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color del pulgar cuando se pasa el mouse sobre él */
  }

  .cajaOpciones {
    height: 175px;
    overflow: hidden;
  }
  .option {
    flex-shrink: 0;
    padding: 0px;
  }

  .silueta {
    transform: scale(0.6);
  }
  #hegalaburra {
    top: 0%;
  }
  #sardinas {
    top: 6%;
  }
  #katxalotea {
    top: 0%;
    left: 40%;
  }
  #atalo {
    top: 30%;
    left: 8%;
  }
  #medusa {
    top: 39%;
    left: 25%;
  }
  #marrazo {
    top: 40%;
    left: 40%;
  }
  #koral {
    top: 20%;
    right: 7%;
  }
  #itsas-kabra {
    top: 43%;
    right: 12.5%;
  }
  #itsas-aingira {
    top: 46.5%;
    right: 2.5%;
  }
  #abakantua {
    top: 50.5%;
    right: 23.5%;
  }
  #olgarroa {
    bottom: -2%;
    right: 4%;
  }
  #mihi-arraina {
    bottom: -0.5%;
    right: 22%;
  }
  #xabiroia {
    bottom: -7%;
  }
  #berberetxoa {
    bottom: -6%;
  }
  #arraia {
    bottom: -11%;
  }
}
@media (min-width: 1px) and (max-width: 426px) {
  .resultados {
    width: 60%;
  }
  .victoria p {
    font-size: 1.2rem;
    text-align: center;
  }
  .resultados a.button-jugar {
    font-size: 1.2rem;
  }
  .resultados h3 {
    font-size: 2rem;
  }
  .cajas {
    /* margin-top: 379px; */
  }
  .silueta p {
    display: none;
  }
  #slideContainer {
    height: 850px;
  }
  .fondoJuego {
    height: auto;
  }
  .fondoJuego source {
    width: 100%;
  }
  .zona-mar {
    width: 85.5%;
    height: 57%;
  }
  .zona-roca {
    width: 45%;
    height: 42%;
  }
  .zona-arena {
    height: 38%;
    width: 53.5%;
  }
  .silueta {
    transform: scale(0.5);
  }
  #hegalaburra {
    top: 32%;
    left: 25%;
  }
  #sardinas {
    top: 2%;
    left: 68%;
    width: 38%;
  }
  #katxalotea {
    top: 2%;
    left: -15%;
  }
  #atalo {
    top: 25%;
    left: 1%;
    width: 30%;
  }
  #medusa {
    top: 25%;
    left: 60%;
    width: 20%;
  }
  #marrazo {
    top: 13%;
    left: 38%;
  }
  #koral {
    top: 37%;
    right: -7%;
    width: 32%;
  }
  #itsas-kabra {
    top: 55%;
    right: 0.5%;
    width: 35%;
  }
  #itsas-aingira {
    top: 71.5%;
    right: -9.5%;
    width: 42%;
  }
  #abakantua {
    top: 63.5%;
    right: 17.5%;
    width: 35%;
  }
  #olgarroa {
    bottom: -4%;
    right: 10%;
    width: 42%;
  }
  #mihi-arraina {
    bottom: -0.5%;
    right: 25%;
    width: 85%;
  }
  #xabiroia {
    bottom: 4%;
    left: -4.5%;
    width: 40%;
  }
  #berberetxoa {
    bottom: 23%;
    left: 25%;
    width: 30%;
  }
  #arraia {
    bottom: 14%;
    left: -9%;
    width: 45%;
  }
}
@media (min-width: 1px) and (max-width: 376px) {
  .cajaOpciones ul.opciones {
    gap: 10px;
    padding: 10px;
    padding-bottom: 0px;
  }
  .cajaOpciones ul.opciones .option {
    height: auto;
  }
  .cajaOpciones ul.opciones .option div {
    width: 83%;
  }
  .cajaOpciones {
    display: flex;
  }
  .cajas {
    margin-top: 330px;
  }
  .option,
  .acierto {
    width: 120px;
    height: 120px;
  }
  .option.clone {
    width: 130px !important;
    height: 130px !important;
  }
  .option.clone div {
    width: 112px;
  }
  .option div,
  .acierto div {
    width: 101px;
  }
}