/* 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: .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, #FE86BA 0%, #FE86BA 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: #02B652;
   border: 3px solid #0275FF;
   border-radius: 2px;
   max-width: 300px;
   width: 100%;
   padding: 1rem;
   margin: .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: .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: .6rem;
   color: var(--color-white);
}

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

.pCheck {
   display: none;
   margin-bottom: .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: #FFD917;
   color: #D53A83;
   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;
   }
}