/* 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;
}

html,
body {
   touch-action: manipulation;
}

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: radial-gradient(#2db2a7, #1e5f6a);
   /* background:
      url(./assets/background-desktop.png),
      radial-gradient(circle,rgb(34, 37, 41) 0%, rgba(21, 29, 42, 1) 70%); */
   background-position: center;
   background-repeat: no-repeat;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   margin: unset;
}

.container {
   background-color: #2b9a9d;
   border: 3px solid #bfff51;
   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-white);
   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;
}

.end-cupon {
   margin: 0;
   font-weight: 700;
}

.pCheck {
   display: none;
   margin-bottom: .6rem;
}

.content-cupon {
   border: 1px solid var(--color-black-movies);
   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: #bfff51;
   color: black;
   padding: 10px 20px;
   cursor: pointer;
   font-weight: 700;
   font-size: 18px;
   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:
         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: #2b9a9d;
      box-shadow: 1px 3px 6px var(--color-black-alpha);
      box-sizing: border-box;
      max-width: calc(100% - 1.2rem);
      position: absolute;
   }

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