/* VARIABLES ---------------------------------------------------- */
:root {
  --color-white: #ffffff;
  --color-grey-light: #f3f3f3;
  --color-grey: #808080;
  --color-orange-mic: #ef8903;
  --color-blue-little: #009be0;
  --color-black: #090909;
  --color-black-mic: #333333;
  --color-black-movies: #131e29;
  --color-black-alpha: #09090944;
  --color-red-movies: #ea0029;
  --color-yellow-movies: #fddc01;
}

/* RESET ---------------------------------------------------- */
*::before,
*::after {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
  font-family: inherit;
  margin: 0;
  padding: 0;
  transition: all 0.3s ease;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  /* touch-action: none; */
  touch-action: auto;
}

html,
body {
  /* touch-action: manipulation; */
  touch-action: pan-y;
}

body {
  /* font-size: 62.5%; */
  box-sizing: border-box;
  display: flex;
  height: 100vh;
  line-height: 1.2;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  user-select: none;
  /* Evita la selección */
  -webkit-user-drag: none;
  /* Evita el arrastre en Safari */
  -webkit-tap-highlight-color: transparent;
  /* Elimina el resaltado en iOS */
  touch-action: manipulation;
}

img:focus {
  outline: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
b,
strong,
i,
em,
mark,
small,
del,
ins,
sub,
sup,
code,
pre,
a,
li,
div {
  /* font-family: 'Lexend', sans-serif; */
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.04rem;
}

b,
strong {
  font-weight: 600;
}

i,
em {
  font-style: italic;
}

ul,
ol {
  list-style-type: none;
}

/* GAME ---------------------------------------------------- */
body {
  /* background: var(--color-black-movies); */
  background: linear-gradient(90deg, #1b2937 0%, #02c89e 80%);
  /* url(./assets/background-desktop.png), */
  /* radial-gradient(circle,#ea0a2a 0%, #fde9b9 100%); */
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: unset;
}

.container {
  background-color: #0cb3e6;
  border: 3px solid #0275ff;
  border-radius: 2px;
  max-width: 300px;
  width: 100%;
  padding: 1rem;
  margin: 0.6rem;
}

.container--start {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container--start .start-title {
  color: var(--color-white);
  font-size: 1.6rem;
  text-align: center;
  margin: 0;
}

.container--start .start-paragraph {
  color: var(--color-white);
  font-size: 1rem;
  text-align: center;
  margin: 0.8rem 0;
}

.container--end {
  display: none;
  color: var(--color-black);
  text-align: center;
  font-size: 1rem;
}

.container--end h3 {
  font-size: 1.6rem;
}

.end-msn {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.6rem;
  color: var(--color-white);
}

.end-cupon {
  margin: 0;
  font-weight: 700;
  color: var(--color-white);
}

.pCheck {
  display: none;
  margin-bottom: 0.6rem;
  color: var(--color-white);
}

.content-cupon {
  border: 1px solid #ea0a2a;
  box-sizing: border-box;
  padding: 8px 16px;
  margin: 1rem auto;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  max-width: max-content;
  font-size: 1.6rem;
  border-radius: 2px;
}

/* .content-cupon .end-cupon-icon {
   filter: brightness(0) saturate(100%) invert(7%) sepia(50%) saturate(603%) hue-rotate(178deg) brightness(92%) contrast(90%);
} */

.container button {
  border: none;
  background-color: #cb3845;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 800;
  font-size: 1.125rem;
  font-family: "Roboto", sans-serif;
  border-radius: 2px;
}

@media (max-width: 1024px) {
  canvas {
    max-width: 60%;
    width: 100%;
  }

  .container {
    box-sizing: border-box;
    position: relative;
  }
}

@media (max-width: 639px) {
  canvas {
    max-width: 100%;
  }

  body {
    /* background: linear-gradient(90deg, #FE86BA 0%, #FE86BA 80%); */
    /* url(./assets/background-mobile.png),
         radial-gradient(circle,rgb(38, 41, 46) 0%, rgba(21, 29, 42, 1) 70%); */
    background-position: center, center;
  }

  .container {
    /* background-color: #0274FF;
      border: 3px solid #ea0a2a; */
    /* background-color: #161c2a; */
    box-shadow: 1px 3px 6px var(--color-black-alpha);
    box-sizing: border-box;
    max-width: calc(100% - 1.2rem);
    position: absolute;
    /* border: 3px solid #ea0a2a; */
  }

  .container--start .start-title {
    text-align: center;
  }
}