/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

:root {
  --primary-dark: #151D27;
  --primary-soft: #232F3E;
  --badge-blue: #3499C4;
  --badge-blue-dark: #308ab1;
  --badge-orange: #CE6101;
  --primary-white: #FFF;
  --seq-white: #A3A3A3;
  --wrong: #F028FD;
  --gradient-background: radial-gradient(
      farthest-corner at 0px 0px,
      #030d0f 50%,
      #532257 185%
    );
}

body {
  padding-top: 92px;
  font-family: "Poppins", sans-serif;
  color: rgb(163 163 163) !important;
  background-color: var(--primary-dark);
}

a {
  color: #47b2e4;
}

a:hover {
  color: #73c5eb;
  text-decoration: none;
}

h2 {
  color: #fff;
}

dialog::backdrop {
  /* background-color: hsl(220, 40%, 40%, 0.25); */
  background-color: hsl(100, 10%, 10%, 0.35);
  /* background-color: rgba(0, 0, 0, 0.3); */
  backdrop-filter: blur(5px);
}

input {
  cursor: pointer;
}


.btn-blue {
  color: var(--primary-white);
  background: var(--badge-blue);
  border-radius: 5px;
  transition: 0.2s ease;
  outline: none;
}

.btn-blue:active {
  background: var(--badge-blue-dark);
  outline: none;
}


/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--primary-dark);
  background-image: var(--bg-loader);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 80%;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #FFF;
  border-top-color: #fff;
  border-bottom-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  display: none;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
}

.back-to-top i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  width: 35px;
  height: 35px;
  border-radius: 50px;
  background: #47b2e4;
  color: #fff;
  transition: all 0.4s;
}

.back-to-top i:hover {
  background: #209dd8;
  color: #fff;
}

/* -----------------------------------
Mensajes emergentes
----------------------------------- */

#message-container {
  position: fixed;
  height: 80%;
  width: 400px;
  right: 50px;
  bottom: 60px;
  display: flex;
  flex-direction: column-reverse;
  gap: 5px;
  z-index: 9;
  pointer-events: none;
  /* overflow: auto; */
}

.general-message-dialog {
  position: relative;
  pointer-events: all;
  margin: 0;
  padding: 20px 20px 10px;
  border-radius: 10px;
  border: #888 2px solid;
  background: #0c3c53;
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.4);
  visibility: visible;
  opacity: 1;
  transition: all 0.4s ease;
}

@keyframes slide-fwd-center {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
  }
  100% {
    -webkit-transform: translateZ(160px);
            transform: translateZ(160px);
  }
}

.general-message-dialog.success {
  background: rgba(52, 153, 196, 0.9);
  /* color: #27c8b7; */
  color: #eee;
  border: #97d7f3 3px dashed;
}

.general-message-dialog.warning {
  background: rgba(229, 250, 45, 0.9);
  border: #899524 3px dashed;
  color: #222;
}

.general-message-dialog.error {
  background: rgba(240, 40, 253, 0.9);
  color: #eee;
  border: #f896ff 3px dashed;
}

.general-message-dialog.closed {
  visibility: hidden;
  opacity: 0;
  transform: translateX(-100%);
}

.general-message-dialog button {
  position: absolute;
  top: 0;
  right: 0px;
  height: 20px;
  aspect-ratio: 1/1;
  background: transparent;
  border-radius: 50%;
  border: none;
  outline: none;
  color: #222;
  font-weight: 600;
}
.general-message-dialog button:hover {
  color: #eee;
}


/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-bg {
  background-color: var(--primary-soft);
}

.section-bg0 {
  background-color: var(--primary-dark);
}

.section-title {
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #FFF;
}

/* .section-title h2::before {
  content: '';
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h2::after {
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #47b2e4;
  bottom: 0;
  left: calc(50% - 20px);
} */

.section-title p {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  section {
    padding: 30px 0;
  }
}

/* -------------------- POWERED BY -------------------- */

.powered-by {
  height: 60px;
  width: 100%;
  /* background: var(--primary-soft); */
  background: var(--primary-dark);
  color: #eee;
  font-size: 0.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.powered-by img {
  height: 50%;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  font-size: 14px;
  background: #FFF;
  box-shadow: 0px 10px 18px 10px rgba(0, 0, 0, 0.3);
}

#footer .footer-newsletter {
  padding: 50px 0;
  background: var(--primary-soft);
  text-align: center;
  font-size: 15px;
  color: #848484;
}

#footer .footer-newsletter h4 {
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 1;
  font-weight: 600;
  color: #FFF;
}

#footer .footer-newsletter form {
  margin-top: 30px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border-radius: 50px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.06);
  text-align: left;
}

#footer .footer-newsletter form input[type="email"] {
  border: 0;
  padding: 4px 8px;
  width: calc(100% - 100px);
}

#footer .footer-newsletter form input[type="submit"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: #47b2e4;
  color: #fff;
  transition: 0.3s;
  border-radius: 50px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

#footer .footer-newsletter form input[type="submit"]:hover {
  background: #209dd8;
}

#footer .footer-top {
  padding: 60px 0 30px 0;
  background: var(--primary-dark);
}

#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}

#footer .footer-contact img {
  max-width: 80%;
}

#footer .footer-top .footer-contact h3 {
  font-size: 28px;
  margin: 0 0 10px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 600;
  color: #FFF;
}

#footer .footer-top .footer-contact p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Jost", sans-serif;
  color: #848484;
}

#footer .footer-top h4 {
  font-size: 16px;
  font-weight: bold;
  color: #FFF;
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #47b2e4;
  font-size: 18px;
  line-height: 1;
}

#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: #777777;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {
  text-decoration: none;
  color: #47b2e4;
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #47b2e4;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  background: #209dd8;
  color: #fff;
  text-decoration: none;
}

#footer .footer-bottom {
  padding-top: 30px;
  padding-bottom: 30px;
  color: #fff;
}

#footer .copyright {
  float: left;
}

#footer .credits {
  float: right;
  font-size: 13px;
}

#footer .credits a {
  transition: 0.3s;
}

@media (max-width: 768px) {
  #footer .footer-bottom {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #footer .copyright, #footer .credits {
    text-align: center;
    float: none;
  }
  #footer .credits {
    padding-top: 4px;
  }
  #footer .footer-contact img {
    max-width: 35%!important;
  }
  .powered-by {
    flex-direction: column;
  }
  .powered-by p {
    margin: 0;
  }
}
/* ------------------------------------------------------------ */


.login-section {
  /* background: var(--primary-dark); */
  /* width: 100vw; */
  max-width: 1920px;
  margin: auto;
  min-height: calc(100dvh - 92px);
  /* height: calc(100dvh - 92px); */
  /* padding: 100px 0;  */
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.3fr;
  grid-template-rows: 0.24fr 1fr 0.18fr;

  /* grid-template-columns: 60% 30% 10%;
  grid-template-rows: 10% 80% 10%; */
}

.login-hero {
  grid-row-start: 2;
  grid-row-end: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0px;

  & img {
    width: 80%;
    max-width: 95dvw;
    height: auto;
  }

}

.login-hero h2 {
  font-size: 2.3rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
}


.login {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  align-self: center;
  height: fit-content;
  padding: 2em;
  position: relative;
  background: rgba(49, 63, 82, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  border-radius: 15px;
  overflow: visible;
  box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.4);
  transition: background-image 1s ease 0s;
}

.login > h3 {
  color: #fff;
  font-size: 1.8em;
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;

  & .register-button {
    align-self: center;
    background: transparent;
    color: #fff;
    font-size: 1.2em;
    text-align: center;
    outline: none;
    border: #27c8b7 solid 2px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    padding: 0.8em 0.5em;
    /* margin: 0 0 1em; */
  }
  & .register-button:active {
    background: #27c8b755;
  }
}

.login label {
  padding-bottom: 0px;
  color: #DDD;
  font-size: 0.9rem;
}

.login input {
  padding: 0.5em;
  width: 100%;
  transition: outline 0.2s ease;
  font-size: 0.9rem;
}

.login .pass-label {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding-bottom: 0;
  width: 25px;
  aspect-ratio: 1/1;
  background-image: var(--bg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: pointer;
}


.login #verify_code {
  padding-left: 0.5em;
}

.login input:focus {
  outline: #27c8b7 2px solid;
  border: #27c8b7 2px solid;
  border-radius: 5px;
}

.login p {
  margin: 1em 0;
  font-size: 0.9em;
  color: #ccc;
}

.red-text {
  color: var(--wrong)!important;
}

#login-submit, #verify-submit, #re-send-verif {
  align-self: center;
  background: #27c8b7;
  color: #fff;
  font-size: 1.2em;
  outline: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  padding: 0.8em 0.5em;
  /* margin: 1em 0; */
}

#verify-submit {
  background: #F028FD;
}

#re-send-verif[disabled] {
  background: rgba(39, 200, 179, 0.2);
  color: #777;
  cursor: default;
}

#verify-submit:active {
  background: #af1fb9;
}

#login-submit:active,
#re-send-verif:active {
  background: #25b3a4;
  border: none;
  outline: none;
}

.code-sent {
  height: 100px;
  width: 150px;
  background-color: #f8f8f8;
  color: var(--primary-dark);
  font-size: 1.3rem;
  position: absolute;
  bottom: 5%;
  left: -30%;
  z-index: 9;
  border-radius: 20px;
  padding: 15px;
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease;
}

.code-sent.active {
  display: block;
  visibility: visible;
  opacity: 1;
}

/* -------------Efecto shake------------ */
.bounceShakeX{
  animation-name: bounce-shakeX;
      -webkit-animation-name: bounce-shakeX;
      -moz-animation-name: bounce-shakeX;
  animation-duration: 0.5s;
      -webkit-animation-duration: 0.5s;
      -moz-animation-duration: 0.5s;
}

@keyframes bounce-shakeX{
  0% {transform: translateX(-30%);}
  12% {transform: translateX(30%);}
  24% {transform: translateX(-20%);}
  36% {transform: translateX(20%);}
  48% {transform: translateX(-10%);}
  60% {transform: translateX(10%);}
  72% {transform: translateX(-5%);}
  84% {transform: translateX(5%);}
  96% {transform: translateX(0%);}
  100% {transform: translateX(0%);}
}

/* ------------------- Modal compra ----------------- */

.modal-header,
.modal-footer {
  background: var(--primary-dark)!important;
  color: #fff;
  border: none!important;
}

.modal-body {
  background: var(--primary-soft);
  color: #fff;
}

.modal-img {
  display: grid;
  grid-template-columns: 50% 50%;
}

.modal-img img {
  width: 80%;
  height: 100%;
  border-radius: 20px;
  grid-column-start: 1;
  grid-column-end: 2;
  align-self: center;
  margin-left: 10px;
}

.modal-img .text {
  grid-column-start: 2;
  grid-column-end: 3;
}


.modal-img h3 {
  color: #fff;
  font-size:x-large;
  font-weight: 700;
}

.modal-img h4 {
  color: #D47EE5;
  font-size: large;
  font-weight: 600;
}

.modal-img h5 {
  font-size: medium;
  color: #3499C4;
}

.buy-modal-btn,
.cancel-modal-btn {
  color: #fff;
  border-radius: 25px;
  padding: 12px;
  outline: 0;
  border: 0;
}

.buy-modal-btn {
  background: #a547e4;
}
.cancel-modal-btn {
  background: #848484;
}

/* ================= GENERAL LOADER =================== */


#general-loader {
  position: fixed;
  top: 0;
  background-color: #030d0f;
  border: none;
  z-index: 10;
  width: 100%;
  height: 100%;
}


#general-loader img {
  position: absolute;
  width: 70%;
  margin: 10px auto;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-30%);
}


/* ---- MAIN ---- */

#main {
  min-height: calc(100dvh - 92px);
}



/* -------------------------- NEW HERO------------------------------ */
/* Pelanding Hero */

.prelanding-hero {
  --color-default: #ffffff;
  --color-default-rgb: 255, 255, 255;

  width: 100%;
  min-height: 95vh;
  position: relative;
  padding: 160px 0 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prelanding-hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 1;
}

.prelanding-hero:before {
  content: "";
  background: linear-gradient(90deg, rgb(0 0 0 / 50%) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0) 90%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.prelanding-hero .container {
  position: relative;
  z-index: 3;
}

.prelanding-hero h2 {
  margin: 0;
  font-size: 55px;
  font-weight: 700;
  color: #fff;
}

.prelanding-hero p {
  color: rgba(var(--color-default-rgb), 0.8);
  margin: 10px 0 0 0;
  font-size: 30px;
}

#prelanding-login,
.btn-get-started {
  margin-top: 15px;
  background-color: #d615e4;
  color: #eee;
  font-size: 1.7rem;
  padding: 10px 20px;
  border-radius: 5px;
  transition: 0.2s ease;
}

#prelanding-login:hover,
.btn-get-started:hover {
  background-color: #c414d1;
  color: #eee;
}

@media (max-width: 768px) {
  .prelanding-hero h2 {
    font-size: 10.5vw;
  }

  .prelanding-hero p {
    font-size: 5vw;
    margin: 5px 0 0 0;
  }
  #prelanding-login,
  .btn-get-started {
    font-size: 5vw;
  }
}


/* sectiontitle */
.section-title {
  text-align: center;
  padding-bottom: 60px;
}

.section-title h2 {
  color:#fff;
  font-size: 32px;
  font-weight: 700;
  position: relative;
  margin: 0;
  padding: 0;
}

.section-title p {
  margin-bottom: 0;
}
/* Features Section - Home Page
------------------------------*/
.features .features-item {
  color: #a3a3a3;
}

.features .features-item+.features-item {
  margin-top: 100px;
}

@media (max-width: 768px) {
  .features .features-item+.features-item {
    margin-top: 40px;
  }
  .features-item h3 {
    margin-top: 10px;
  }
}

.features .features-item h3 {
  color: #fff;
  font-weight: 700;
  font-size: 26px;
}

.features .features-item img {
  border: 6px solid var(--color-box-background);
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
}

.features .features-item .features-img-bg {
  position: relative;
  min-height: 500px;
}

@media (max-width: 640px) {
  .features .features-item .features-img-bg {
    min-height: 300px;
  }
}

.features .features-item .features-img-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.features .features-item .image-stack {
  display: grid;
  position: relative;
  grid-template-columns: repeat(12, 1fr);
}

.features .features-item .image-stack .stack-back {
  grid-column: 4/-1;
  grid-row: 1;
  width: 100%;
  z-index: 1;
}

.features .features-item .image-stack .stack-front {
  grid-row: 1;
  grid-column: 1/span 8;
  margin-top: 20%;
  width: 100%;
  z-index: 2;
}
/*  */

/* Contenedor principal */
.hero-container {
  width: 100%;
  background: #030d0f;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px 0;
}
#hero-expand {
  background: var(--primary-soft);
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 16/4;
  padding: 0;
  z-index: 3;
  overflow: hidden;
}

/* Todos los banners */
.hero-ex {
  position: relative;
  /* height: 100%; */
  min-width: 14%;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 10px 2px 30px 1px rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: 10px 2px 30px 1px rgba(0, 0, 0, 0.24);
  /* general: */
  background-image: var(--bg-mini);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.hero-ex:hover {
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
}
/* Banner con collage de juegos */
.hero-img-2 {
  display: grid;
  grid-template-columns: 70% auto;
  grid-template-rows: 100%;
  gap: 3px;
}
.hero-img-2 a {
  display: none;
  box-shadow: -8px 4px 38px 14px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: -8px 4px 38px 14px rgba(0, 0, 0, 0.5);
}
.hero-img-2 a:hover {
  color: #fff;
}
.game-collage-1 {
  position: relative;
  grid-column-start: 1;
  grid-column-end: 2;
  background-image: var(--bg-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: none;
}
.cg-lk-1 {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: fit-content;
  height: fit-content;
}
.game-collage-2 {
  grid-column-start: 2;
  grid-column-end: 3;
  display: none;
  flex-direction: column;
  gap: 3px;
}
.game-collage-2 a {
  font-size: 12px;
  padding: 6px 35px 6px 17px;
  position: absolute;
  margin: 10px 15px;
  bottom: 2px;
  right: 5px;
}
.clg2-img {
  width: 100%;
  height: 100%;
  background-image: var(--bg-img);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.clg2-img a::after {
  width: 30px;
  height: 30px;
  background-size: 20px 20px;
}
.hero-img-4 {
  display: grid;
  grid-template-columns: 40% auto;
  grid-template-rows: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.hero-img-4 h3 {
  flex-direction: column;
  justify-content: center;
  text-align: left;
  color: #fff;
  font-size: 40px;
  font-weight: 600;
  text-shadow: rgb(77, 64, 14) 1px 1px 6px;
  height: 100%;
  position: absolute;
  grid-column-start: 1;
  grid-column-end: 2;
  width: 80%;
  padding-left: 50px;
  /* Cambia cuando se expande: */
  display: none;
}
.hero-img-4 h4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-shadow: #FC0 1px 1px 6px;
  height: 100%;
  width: 100%;
  position: absolute;
  transition: all 0.25s ease-in-out;
}
.hero-img-4 iframe {
  display: none;
  margin: 0;
  padding: 0;
  grid-column-start: 2;
  grid-column-end: 3;
  border-radius: 20px;
  max-height: 90%;
  width: 80%;
  align-self: center;
  justify-self: center;
  box-shadow: 1px 1px 38px 14px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 1px 1px 38px 14px rgba(0, 0, 0, 0.35);
}
/* Banner expandido */
.hero-expanded {
  -webkit-box-flex: 1;
  flex: 1;
  background-image: var(--bg-expand);
  background-size: cover;
}
.hero-expanded a {
  display: inline-block;
}
.hero-expanded .game-collage-1,
.hero-expanded .game-collage-2,
.hero-expanded h3,
.hero-expanded iframe {
  display: flex;
}
.hero-expanded h4 {
  display: none;
}
.hero-expanded:hover,
.hero-expanded:hover .game-collage-1,
.hero-expanded:hover .clg2-img1,
.hero-expanded:hover .clg2-img2 {
  box-shadow: none;
}

/* ---------------- END NEW HERO ----------------- */


/* Boton comprar */
.buy-btn {
  position: relative;
  display: inline-block;
  margin: 20px;
  padding: 8px 45px 8px 25px;
  border: none;
  outline: none;
  color: #fff;
  background-color: #a547e4;
  font-size: 16px;
  font-weight: 500;
  font-family: "Jost", sans-serif;
  transition: 0.2s;
  border-radius: 50px;
}

.buy-btn:hover {
  background: #7833a7;
  color: #fff!important;
}

.buy-btn:focus {
  outline: none;
  border: none;
}

.buy-btn::after {
  content: url();
  width: 41px;
  height: 41px; 
  
  background-color: #fff;
  background-image: var(--by-ic);
  background-size: 26px 26px;
  background-repeat: no-repeat;
  background-position: center;

  padding: 8px;
  color: #000;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -8%;
}
/* -------------- LANDING GAMES SECTION MODAL(S) -------------- */

.landing-games {
  padding: 30px 0 30px 0;
}

.landing-game-dialog {
  border: none;
  outline: none;
  border-radius: 8px;
  background: var(--primary-dark);
  color: #eee;
  padding: 30px;
  animation: scale-up-center 0.4s
  cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  overflow: hidden;
}

.lg-gc-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-game-dialog h5 {
  color: #ccc;
  margin: 0;
}

.landing-game-dialog hr {
  height: 1px;
  width: 150%;
  margin: 0;
  transform: translateX(-20%);
  border-bottom: rgba(255, 255, 255, 0.3) 1px solid;
}

.lg-gc-dg-cont {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding-bottom: 90px;
}

.lg-gc-dg-cont button {
  position: absolute;
  right: 0;
  bottom: 0;
}

.landing-game-dialog h6 {
  color: #a3a3a3;
  max-width: 280px;
}

.landing-game-dialog h6 > .conf-modal-name {
  color: #eee;
  margin: 5px 0 0 0;
}

.landing-game-dialog img {
  max-width: 200px;
  border-radius: 10px;
  margin-bottom: 10px;
  filter: drop-shadow(0px 0px 9px hsla(0deg, 0%, 0%, 0.6));
}

.lg-gc-dg-cont > h6 > .conf-modal-cost {
  background: #3499C4;
  color: #fff;
  width: max-content;
  margin: 0;
  border-radius: 6px;
  padding: 3px 7px;
  z-index: 2;
  display: inline-block;
}

.landing-game-dialog .buy-btn {
  width: fit-content;
  padding: 8px 40px 8px 15px;
  font-size: 0.9rem;
  margin: 0px;
}

.landing-game-dialog .buy-btn::after {
  width: 37px;
  height: 37px;
  background-size: 27px 27px;
  padding: 8px;
  right: -5%;
}

.landing-game-dialog iframe .text-color-05 {
  color: #d615e4!important;
}
/* ---------------- NEW CONTENT SECTION ------------------- */

#main-content {
  background: rgb(12,3,15);
  background-image: radial-gradient(
    farthest-corner at 0px 0px,
    #030d0f 50%,
    #532257 185%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0;
}

#main-content > h2 {
  margin-bottom: 40px;
}

.content-servs {
  width: 80%;
  max-width: 1920px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  
}

.main-services {
  height: 200px;
  display: grid;
  grid-template-columns: 75% auto;
  position: relative;
  color: #fff;
  background: var(--primary-soft);
  padding: 25px;
  cursor: pointer;
  border-radius: 2rem;
  border: 0.1rem solid transparent;
  transition: all 0.2s ease;
}

.main-services:hover {
  border: 0.1rem solid #fff;
  box-shadow: 0 0 .2rem #fff,
            0 0 .2rem #fff,
            0 0 2rem #bc13fe,
            0 0 0.8rem #bc13fe,
            0 0 2.7rem #bc13fe,
            inset 0 0 1.3rem #bc13fe;
}

.main-services h5 {
  font-family: 'Poppins' sans-serif;
  font-size: 1.1rem;
  color: #ddd;
}

.main-services span {
  width: 85px;
  height: 85px;
  position: absolute;
  bottom: 16px;
  right: 20px;
  background-image: var(--card-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 895px) {
  .content-servs {
    width: 85%;
    grid-template-columns: 1fr 1fr; 
  }
  .main-services span {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 560px) {
  #main-content {
    padding: 20px 0;
  }
  #main-content h2 {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }
  .content-servs {
    width: 90%;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .main-services {
    height: 68px;
    padding: 14px 20px;
    border-radius: 10px;
  }
  .main-services h5 {
    font-size: 1rem;
  }
  .main-services span {
    width: 50px;
    height: 50px;
    bottom: 5px;
  }
}


/* -------------------- CATEGORIES SECTION --------------------- */

#categories {
  height: fit-content;
  background: var(--primary-dark);
  padding: 35px 0 50px 0;

}

#categories h2 {
  color: #fff;
  text-align: start;
  margin-bottom: 30px;
}

.cont-cat {
  width: 90%;
  max-width: 1920px;
  margin: 0 auto;
}

.categories-section {
  /* display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  /* justify-items: center; */
  width: 90%;
  margin: 0 auto;
}

.cat-card {
  width: 140px;
  height: 140px;
  background: #47B2E4;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  box-shadow: 0px 12px 20px 1px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
}

.cat-card span {
  width: 40px;
  height: 40px;
  background-image: var(--card-icon);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}


.cat-card:hover {
  color: #fff!important;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);;
}


@media (max-width: 992px) {
  .categories-section {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (max-width: 895px) {
  .categories-section {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .categories-section {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 400px) {
  .cat-card {
    width: 90px;
    height: 90px;
    font-size: 1rem;
  }
}
/* ------------------END CATEGORIES SECTION --------------------- */

/* ------------- LANDING GAMES SECTION ---------------- */


.landing-games-container h2 {
  margin-bottom: 30px;
}

.land-game-row {
  gap: 30px;
}

.more-btn-cont {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 3rem 0 1rem;
}

.more-games-btn {
  padding: 0.7rem 1.5rem;
  border-radius: 30px;
  background: var(--badge-orange);
  color: var(--primary-white);
  border: none;
}

.more-games-btn:hover {
  background: var(--badge-blue);
  color: var(--primary-white);
}

/* --- langing games section for suspended users --- */

.warning-dialog {
  width: 90vw;
  max-width: 1000px;
  padding: 5px 50px 60px;
  border: none;
  border-radius: 15px;
  outline: 5px var(--badge-orange) dashed;
  background-image: var(--gradient-background);
  color: var(--primary-white);
  text-align: center;

  & h5 {
    font-size: 2rem;
  }

  & div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    font-size: 1.5rem;

    & .dialog-close {
      align-self: end;
      background: transparent;
      padding: 0 10px;
      margin-right: -35px;
      border: none;
      color: var(--primary-white);

    }

    & .dialog-close:focus, .dialog-close:hover {
      border: none;
      outline: none;
      color: #777;
    }

    & a {
      color: var(--primary-white);
      background: var(--badge-blue);
      padding: 1rem 2rem;
      border-radius: 10px;
      transition: background 0.2s ease;
    }

    & a:hover, a:focus, a:active {
      background: var(--badge-orange);
    }

    & small {
      padding: 0 20px;
      font-size: 1rem;
      color: #777;
    }
  }
}




/* ------------------------- LANDING PUBLICITARY BANNER ------------------- */

#landing-publicity {
  width: 100%;
  /* aspect-ratio: 364/45; */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: var(--primary-soft);
}

.landpub-container {
  width: 100%;

  & picture {
    width: 100%;
    
    & img {
      width: 100%;
    }
  }
}

/* ------------------- NEW HEADER ------------------ */

#new-header {
  background: var(--primary-dark);
  height: 92px;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 10px 0;
  display: grid;
  grid-template-columns: 25% 75%;
  box-shadow: 0px 15px 18px -10px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.nh-logo {
  grid-column-start: 1;
  grid-column-end: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 100%;
}

.n-head-links,
.mobile-head-btn {
  /* grid-column-start: 2;
  grid-column-end: 3; */
  position: relative;
  align-items: center;
  justify-content: space-evenly;
}

.user-header-info img {
  height: 30px;
  filter: drop-shadow(0px 0px 4px hsla(0deg, 0%, 0%, 0.3));
}

.mobile-head-btn img {
  height: 40px;
  filter: drop-shadow(0px 0px 4px hsla(0deg, 0%, 0%, 0.3));
}

.n-head-links {
  display: flex;
  justify-content: end!important;
  gap: 3rem;
  padding-inline-end: 20px;
}

.n-head-links a,
.n-head-links ul {
  color: #fff;
  position: relative;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0;
}

.n-head-links a:hover,
.n-head-links ul:hover {
  color: #47B2E4;
}

.n-head-links ul:hover.head-list li, 
.head-list:hover {
  visibility: visible;
  opacity: 1;
}

.n-head-links > a::before,
.n-head-links > ul > a::before {
  transition: all 0.2s ease;
}

.n-head-links > a:hover::before,
.n-head-links > ul > a:hover::before {
  content: '';
  position: absolute;
  top: -12px;
  width: 100%;
  height: 5px;
  background: #47B2E4;
}

.head-list > a::after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
}

.user-header-info {
  position: relative;
  display: flex;
  justify-content: center;
}

.desk-cred-count {
  height: 24px;
  width: 24px;
  position: absolute;
  top: 55%;
  left: 57%;
  transform: translate(-50%, -50%);
  background: transparent;
  color: #fff;
  margin: 0;
  border-radius: 50%;
  text-align: center;
  user-select: none;
  font-size: 90%!important;
}

.user-header-info p {
  margin: 0;
  color: #DDD;
}

.mobile-head-btn {
  justify-content: space-between;

}

.mobile-head-btn button {
  height: 40px;
  width: 40px;
  margin-right: 3vw;
  border: none;
  outline: none;
  background-color: transparent;
  background-image: var(--img-open);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.mobile-head-btn button.close {
  background-image: var(--img-close);
}

.head-list {
  list-style: none;
}

.head-list li {
  position: absolute;
  top: 70px;
  display: flex;
  flex-direction: column;
  z-index: 5;
  gap: 5px;
  width: max-content;
  background: var(--primary-dark);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s linear;
  box-shadow: 0px 18px 18px -10px rgba(0, 0, 0, 0.3);
}

.head-list li a {
  padding: 10px 30px 10px 20px;
}

.head-list li a:hover {
  background: var(--primary-soft);
}


/* usuario */

.user-nav-desk li {
  color: #eee;
  right: 0;
}

.user-nav-desk h5 {
  color: #ddd;
  font-size: 0.95rem;
}

.user-nav-desk h6 {
  color: #aaa;
  font-size: 0.90rem;
}

.user-nav-desk p {
  color: #999;
  font-size: 0.8rem;
}

.header-user-data {
  text-align: center;
}

.header-user-data a {
  justify-content: center;
  font-size: 0.9rem;
}

/*  */


@media (min-width: 991px) {
  .mobile-head-btn {
    display: none;
  }
  .n-head-links {
    display: flex;
  }
}
@media (max-width: 992px) {
  .mobile-head-btn {
    display: flex;
  }
  .n-head-links {
    display: none;
  }
}

@media (max-width: 768px) {
  #new-header {
    grid-template-columns: 30% 70%;
  }
}

@media (max-width: 600px) {
  body {
    padding-top: 75px;
  }
  #new-header {
    grid-template-columns: 40% 60%;
    height: 75px;
    padding: 2px 0;
  }
  .user-header-info img {
    background: var(--primary-soft);
    border-radius: 50%;
    padding: 2px;
  }
  .user-header-info::before {
    content: 'Tickets del usuario: ' var(--credits);
    background: #ddd;
    color: #000;
    border-radius: 5px;
    padding: 2px 4px;
    font-size: 0.7rem;
    position: absolute;
    left: -95px;
    bottom: -25px;
    display: none;
    min-width: max-content;
  }
  .user-header-info::after {
    content: var(--credits);
    height: 17px;
    width: 17px;
    padding: 1px;
    border-radius: 50%;
    background: #3499C4;
    position: absolute;
    top: -4px;
    right: -6px;
    color: #eee;
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .user-header-info small {
    display: none;
  }
  .user-header-info:hover.user-header-info::before {
    display: block;
  }
}


@media (max-width:480px){
  #new-header {
    grid-template-columns: 65% 35%;
  }
}
/* ----- Mobile Menu ----- */

.mobile-menu2 {
  /* background: #0c3c53; */
  background: rgb(12,3,15);
  background-image: radial-gradient(
    farthest-corner at 0px 0px,
    #030d0f 50%,
    #532257 185%);
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 10;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.4s ease, visibility 0.4s ease;
  overflow: auto;
  padding-bottom: 100px;
}

.mobile-menu2.expanded {
  transform: translateX(0%);
  visibility: visible;
}

.mobile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 70%;
  margin: 40px auto 0;
}

.mobile-container a,
.mobile-container button {
  color: #fff;
  font-size: 1.4rem;
  margin: 50px 0 20px 0;
}

.mobile-container button {
  margin-bottom: 0;
}

.mobile-container a:hover,
.mobile-container button:hover {
  color: #a547e4;
}

.mobile-container ul {
  padding: 0;
  margin: 0;
  height: fit-content;
}


.mobile-container ul li a {
  font-size: 1.3rem;
  margin: 0;
}

.mobile-container ul li a:hover {
  color: #47B2E4 ;
}

.mob-lst button {
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}

.mob-lst button::after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
}

.mob-lst li {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0 0 30px;
  height: 0px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s ease, opacity 0.3s ease, height 1s ease;
}

.mob-lst li.expanded {
  height: fit-content;
  visibility: visible;
  opacity: 1;
  /* visibility: visible; */
}

@media (max-width: 560px) {
  .mobile-container {
    width: 90%;
  }
}


/* ---------- NEW GAME CARDS ----------- */

.game-card1 {
  background: var(--primary-dark);
  min-height: 390px;
  width: 250px;
  display: grid;
  grid-template-rows: 60% 40%;
  box-shadow: 0px 0px 15px -4px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  position: relative;
  transition: 0.2s ease;
}

.game-card1.pub-card {
  background: #3d4a5b;
}

.gc-img-cont {
  grid-row-start: 1;
  grid-row-end: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.game-card1:hover {
  box-shadow: 0px 0px 17px 4px rgba(0, 0, 0, 0.28);
}

.gc-img {
  max-height: 90%;
  max-width: 90%;
  border-radius: 10px;
  filter: drop-shadow(0px 0px 9px hsla(0deg, 0%, 0%, 0.6));
}

.game-card1.pub-card > .gc-info {
  background: transparent;
}

.gc-info {
  border-radius: 10px;
  grid-row-start: 2;
  grid-row-end: 3;
  background: var(--primary-dark);
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gc-info h4 {
  color: #fff;
  margin: 0;
  font-size: 1.2rem;
}

.gc-info span {
  max-height: 70px;
  max-width: 100%;
  overflow: auto;
  font-size: 0.95rem;
  color: #bbb;
}

.gc-info span::-webkit-scrollbar {
  width: 5px;
}

.gc-info span::-webkit-scrollbar-track {
  background-color: var(--primary-dark);
  border-radius: 5px;
}

.gc-info span::-webkit-scrollbar-thumb {
  background-color: var(--primary-soft);
  border-radius: 5px;
}

.gc-btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: end;
}

.gc-btns p {
  /* background: #3499C4; */
  background: var(--badge-blue);
  color: #fff;
  font-size: 0.7rem;
  width: max-content;
  margin: 0;
  border-radius: 6px;
  padding: 3px 7px;
  z-index: 3;
}

[fa-card] .gc-btns p {
  background: var(--badge-orange);
}

.gc-btn {
  border: none;
  outline: none;
  padding: 6px 37px 6px 15px!important;
  margin: 0 9px 0 0!important;
  font-size: 0.9rem!important;
  z-index: 2;
}

.gc-btn::after {
  width: 35px!important;
  height: 35px!important; 
  background-size: 23px 23px!important;
}

/* --- GIVEAWAYS (Removido) --- */


/* ------ TITULOS PRINCIPALES ------- */

.primary-title {
  color: #fff;
  margin: 0;
  font-size: 2rem;
}

.section-container {
  width: 90%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 30px 0;
}

.section-hero-container {
  display: grid;
  grid-template-columns: 50% 50%;
}

/* ----------------- GAMES SECTION --------------- */
#games-main {
  background-color: var(--primary-soft);
}

.games-section-container {
  display: grid;
  grid-template-columns: 200px auto;
  gap: 30px;
  width: 90%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 30px 0;
}

.games-container {
  grid-column-start: 2;
  grid-column-end: 3;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  transition: 0.3s ease-in-out;
}

.games-section-container > h1 {
  color: #fff; 
  text-align: left;
  grid-column-start: 1;
  grid-column-end: 3;
}

.game-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 30px;
  justify-items: center;
  margin: auto;
}

.fa-games-section .game-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(365px, 1fr));
  grid-gap: 45px;
  margin: auto -50px;
}

.no-games {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  margin: 30px 0;
}
.no-games img {
  filter: drop-shadow(5px 5px 5px #222);
}

.game-filter-section {
  grid-column-start: 1;
  grid-column-end: 2;
  width: 200px;
  background: var(--primary-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  color: #fff;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

.game-filter-section::-webkit-scrollbar {
  width: 10px;
}

.game-filter-section::-webkit-scrollbar-track {
  background-color: var(--primary-dark);
  border-radius: 10px;
}

.game-filter-section::-webkit-scrollbar-thumb {
  background-color: var(--primary-soft);
  border-radius: 10px;
}



#text-game-search, 
.game-search {
  /* position: relative; */
  width: 90%;
  background: #0c3c53;
  border: none;
  outline: none;
  box-shadow: inset -11px 11px 5px -10px rgba(0,0,0,0.5);
  padding: 5px;
  color: #fff;
  transition: background 0.2s ease;
}

#text-game-search:focus,
.game-search:focus {
  background: #092f41;
}

.games-info-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.games-info-header h6 {
  margin: 0;
  color: #A3A3A3;
}

.order-selector,
.order-selector option {
  background: var(--primary-dark);
  color: #ddd;
  cursor: pointer;
  border: none;
  outline: none;
  padding: 5px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

.game-filter-section label {
  width: 80%;
  display: flex;
  font-size: 1rem;
  color: #A3A3A3;
  align-items: center;
  justify-content: left;
  cursor: pointer;
}

.game-filter-section input[type=checkbox] {
  /* appearance: none; */
  width: 20px;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
  accent-color:  #bc13fe;
  background-color: #0c3c53;
  border-radius: 5px;
  text-align: center;
}

.filt-mob-btn {
  position: fixed;
  left: 0%;
  top: 50%;
  transform: translateX(-50%);
  background-image: url('../img/filters-white.svg');
  background-size: 35%;
  background-position: 82%;
  background-repeat: no-repeat;
  border-radius: 50%;
  height: 70px;
  width: 70px;
  padding: 10px;
  border: none;
  outline: none;
  background-color: #F028FD;
  transition: 0.3s ease;
  z-index: 5;
  display: none;
  box-shadow: 0px 0px 15px -4px rgba(0, 0, 0, 0.25);
}

.filt-mob-btn:focus {
  outline: none;
  border: none;
}


.pag-btns-nav {
  width: 90%;
  display: flex;
  justify-content: center;
  margin: 20px auto 0 auto;
  padding: 0px 0px 30px 200px;
}

#game-paginator-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.pag-btn {
  color: #888;
  background: transparent;
  outline: none;
  border: none;
  border-radius: 10px;
  font-size: 1.2rem;
  height: 40px;
  width: 40px;
  padding: 2px 10px;
  margin: 0 3px;
}

.pag-btn:hover,
.pag-btn:focus {
  outline: none;
  border: none;
  box-shadow: 0px 0px 14px rgba(0,0,0,0.4);
}

.pag-btn.active {
  color: #fff;
  box-shadow: 0px 0px 14px rgba(0,0,0,0.4);
}

.pag-btn.unactive,
.pag-arr[disabled] {
  color: #555;
  cursor: no-drop;
}

.pag-btn.unactive:hover,
.pag-btn.unactive:focus, 
.pag-arr[disabled]:hover,
.pag-arr[disabled]:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

/* ====== INDIVIDUAL GAMES PAGE ====== */

#ind-game-info {
  min-height: fit-content;
}

#ind-game-info iframe {
  background: var(--primary-soft);
  width: 100vw;
  height: 90vh;
}

.game-info-container {
  width: 100%;
  min-height: calc(100dvh - 92px);
  padding: 60px 0;
  background-size: cover;
  background-position: center;
  background-image: var(--game-bg);
  background-color: var(--primary-dark);
  box-shadow: inset 0px -360px 195px 120px rgba(20, 29, 39, 0.95);
}

.game-info-data-container {
  width: 90%;
  max-width: 1920px;
  margin: auto;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
}


.game-info-main-game,
.game-info-main-description,
.game-info-terms-redeem {
  display: flex;
  flex-direction: column;

  border-radius: 10px;
  background: var(--primary-dark);
  background-image: radial-gradient( farthest-corner at 0px 0px, var(--primary-dark) 50%, #532257 185% );
  box-shadow: 0px 0px 15px -4px rgba(0, 0, 0, 0.25);
}

.game-info-main-game {
  grid-column: 1;
  grid-row: 1 / 2;

  min-height: 500px;
  overflow: hidden;
  color: #eee;
  font-size: 1rem!important;
  
}

.main-game-img {
  background-image: var(--game-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 60%;
  width: 100%;
}

.g-info-m-g-data {
  width: 90%;
  max-height: 100%;
  margin: 0 auto;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.g-info-m-g-data h1 {
  color: #eee;
  font-size: 1.6rem;
}

.game-info-main-description {
  grid-column: span 2;
  grid-row: 1 / 2;
  padding: 30px 30px 50px 30px;
  position: relative;
  gap: 25px;
}

.game-info-main-description button {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.prod-credit-cost {
  background: #3499C4;
    color: #fff;
    font-size: 1rem;
    width: max-content;
    margin: 0;
    border-radius: 6px;
    padding: 3px 7px;
}


.game-info-terms-redeem {
  grid-column: span 3;
  grid-row: 2 / 3;
  padding: 30px;
  position: relative;
  gap: 25px;
}

.game-info-terms-redeem h4 {
  color: #ccc;
}

#game-info-confirmation-modal {
  background: var(--primary-dark);
  color: #eee;
  border: none;
  outline: none;
  padding: 35px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px -4px rgba(85, 85, 85, 0.35);
  animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.gicm-data-cont {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gicm-data-cont h2 {
  font-size: 2rem;
  margin-bottom: 25px;
}
.gicm-data-cont h3,
.gicm-data-cont span {
  color: #d0d0d0;
  font-size: 1.3rem;
}
.gicm-btn-cont {
  display: flex;
  justify-content: end;
  gap: 20px;
  margin-top: 20px;
}
.g-ing-cancel-btn {
  border-radius: 50px;
  transition: 0.2s;
  border: 2px #aaa solid;
  color: #aaa;
  background: transparent;
  outline: none;
  padding: 6px 18px 6px 18px;
  margin: 0 9px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.g-ing-cancel-btn:hover,
.g-ing-cancel-btn:focus {
  outline: none;
}
#game-info-confirmation-btn {
  padding: 0px 35px 0px 13px!important;
  font-size: 0.9rem!important;
}

.trans-ok-modal-cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  color: var(--primary-white);
  position: relative;
  
  & .dialog-close {
    position: absolute;
    top: -20px;
    right: -20px;
    background: transparent;
    color: #777;
    border: none;
    outline: none;
  }

  & h5 {
    color: var(--badge-blue);
    display: flex;
    align-items: center;
    gap: 5px;

    & button {
      padding: 0.3rem 0.6rem;
      border: 1px #777 solid;
      border-radius: 1rem;
      font-size: 1rem;
      background: transparent;
      color: #777;
    }

    & button:hover {
      background: var(--primary-soft);
    }
  }

  & span {
    color: #777;
  }
}


/* ------------------- GIVEAWAYS SECTION (Removido) -------------------- */

/* ----------------------- FULLACCESS ------------------------ */

#fullaccess-main {
  /* background: var(--primary-soft); */
  background: var(--primary-soft);
  background-image: linear-gradient(to bottom, rgba(35, 47, 62, 0.88), 
  rgba(35, 47, 62, 0.97), rgba(35, 47, 62, 0.99), rgba(35, 47, 62, 1)),
  var(--bg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

.fa-section-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.fa-pres-img {
  display: flex;
  align-items: center;
  justify-content: center;

  & img {
    width: auto;
    height: 200px;
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.4);
  }
}

.fa-search-cont {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}


.fa-games-section {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;

  & h2 {
    font-size: 1.7rem;
  }

  & span {
    color: var(--seq-white);
  }
}

.fa-game-card {
  background: var(--primary-dark);
  height: 185px;
  width: 360px;
  padding: 13px 25px 13px 15px;
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 10px;
  box-shadow: 0px 0px 15px -4px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  position: relative;
}

.fa-game-card:hover {
  box-shadow: 0px 0px 17px 4px rgba(0, 0, 0, 0.28);
}

.fa-img-cont {
  grid-column-start: 1;
  grid-column-end: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.fa-img {
  max-height: 90%;
  width: 90%;
  max-width: 90%;
  border-radius: 10px;
  filter: drop-shadow(0px 0px 9px hsla(0deg, 0%, 0%, 0.6));
}

.fa-info {
  grid-column-start: 2;
  grid-column-end: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.fa-info h4 {
  color: #fff;
  margin: 0;
  font-size: 1.1rem;
}

.fa-info span {
  font-size: 0.8rem;
}

.fa-btns {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: end;
}

.fa-btns p {
  background: #ce6101;
  color: #fff;
  font-size: 0.7rem;
  width: max-content;
  margin: 0;
  border-radius: 6px;
  padding: 3px 7px;
  z-index: 2;
}


.fa-btn {
  padding: 5px 33px 5px 15px!important;
  margin: 0 9px 0 0!important;
  font-size: 0.85rem!important;
}

.fa-btn::after {
  width: 34px!important;
  height: 34px!important; 
  background-size: 23px 23px!important;
}

/* ----- FA GAMES MODAL ----- */

.fa-game-modal {
  min-width: 95dvw;
  height: auto;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--primary-dark);

  & button {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    text-align: center;
    background-color: var(--primary-soft);
    color: #DDD;
    border-radius: 50%;
    border: none;
    outline: none;
  }

  & button:active {
    background-color: var(--primary-dark);
  }

  & iframe {
    width: 100%;
    height: 100%;
  }
}


/* ------------------- USER DATA SECTION --------------------- */

#user-space-main {
  padding-bottom: 30px;
  min-height: 80dvh;
}

.u-space-section-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.user-space-container {
  display: flex;
  gap: 20px;

  & .usr-edit-btn {
    font-size: 0.9rem;
    background: transparent;
    color: #aaa;
    border: none;
    outline: none;
    padding: 5px 10px;
    /* margin-top: 20px; */
    border-radius: 10px;
  }

  & .usr-edit-btn:hover {
    color: #ccc;
    box-shadow: 0px 0px 15px -4px rgba(0, 0, 0, 0.65);
  }
}

.user-space-data {
  height: fit-content;
  background: var(--primary-soft);
  padding: 20px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-shadow: 0px 0px 15px -4px rgba(0, 0, 0, 0.25);

}

.user-space-data h2,
.user-space-products h2 {
  margin: 0;
  font-size: 1.5rem;
}

.user-space-data h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #ddd;
}

.u-spc-data-cont {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;

  & p {
    margin: 0;
  }
}



.user-space-products {
  background: var(--primary-soft);
  flex: 1;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0px 0px 15px -4px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.user-products {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  overflow: auto;
  background: var(--seq-white);
  border-radius: 3px;

  & .table {
    color: var(--primary-dark);
    display: table;
    width: 100%;

    & thead th {
      background: var(--primary-dark);
      color: #ddd;
      font-weight: bold;
      text-transform: uppercase;
    }

    & td {
      vertical-align: middle!important;
    }

    & .t-btn {
      background-color: var(--primary-soft);
      color: var(--primary-white);
      border-radius: 3px;
      font-style: normal;
      line-height: 1;
      padding: 4px;
      font-size: 0.8rem;
      outline: none;
      border: none;
    }
    & .t-btn:focus,
    .t-btn:hover {
      outline: none;
      background-color: var(--primary-dark);
    }
  }
}


.table tbody tr:hover {
  background: rgba(0, 0, 0, 0.2)!important;
}

.tbl-prod-img-cont {
  display: inline-block;
  height: 70px;
  aspect-ratio: 9/12;
  
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
  }
}


#code-info-modal,
#code-dialog {
  background-color: var(--primary-dark);
  color: var(--primary-white);
  border-radius: 20px;
  outline: none;
  border: none;
  box-shadow: 0px 0px 15px -4px rgba(85, 85, 85, 0.35);
}

.close-modal-btn {
  background-color: transparent;
  color: inherit;
  border: none;
  outline: none;
}

.close-modal-btn:active,
.close-modal-btn:focus {
  border: none;
  outline: none;
}


#redeem_code,
#redeem_url {
  width: 0px;
  max-width: 0px;
  margin: 0;
  margin-right: 0px;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  visibility: hidden;
  transition: 0.5s ease-in-out;
}

#redeem_code[show],
#redeem_url[show] {
  width: fit-content;
  margin-right: 10px;
  white-space: wrap;
  max-width: fit-content;
  color: #27c8b7;
  visibility: visible;
}

#rc-btn:focus,
#url-btn:focus {
  outline: none;
  border: none;
}

#rc-btn::before {
  content: 'Mostrar código';
}

#url-btn::before {
  content: 'Mostrar URL';
}

#rc-btn[show]::before,
#url-btn[show]::before {
  content: 'Ocultar';
}

#rc-copy-btn {
  background-color: transparent;
  color: var(--badge-blue);
  border: var(--badge-blue) 2px solid;
  border-radius: 5px;
  transition: 0.2s ease;
}

#rc-copy-btn::before {
  content: 'Copiar';
  transition: 0.2s ease;
}

#rc-copy-btn:active::before,
#rc-copy-btn:focus::before {
  content: 'Copiado!';
}

#rc-copy-btn:active,
#rc-copy-btn:focus {
  outline: none;
}

.big-copy-btn {
  padding-inline: 15px;
  color: var(--seq-white);
  border: var(--seq-white) 2px solid;
  background: transparent;
  border-radius: 15px;
  width: fit-content;
}

.big-copy-btn::before {
  content: 'Copiar'
}

.big-copy-btn:active::before,
.big-copy-btn:focus::before {
  content: 'Copiado!';
}

.uspace-logout {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;

  & button {
    background-color: transparent;
    outline: none;
    border: none;
  }
  & button:hover {
    color: var(--badge-blue)
  }
}

.us-lgt-btn {
  color: #a3a3a3;
}

#usr-chnge-modal {
  background: var(--primary-dark);
  color: #aaa;
  outline: none;
  border-radius: 10px;
  padding: 30px 35px 25px;
  overflow: hidden;

  & form {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  & p {
    padding-top: 15px;
    margin: 0;
    text-align: center;
    color: var(--wrong);
  }
}


.ncknm-lbl {
  position: relative;
}

#user-nickname {
  width: 100%;
  background: #0c3c53;
  border: none;
  outline: none;
  box-shadow: inset -11px 11px 5px -10px rgba(0,0,0,0.5);
  padding: 5px;
  color: #fff;
  transition: background 0.2s ease;
}

.nck-btns-cont {
  margin-top: 15px;
  display: flex;
  gap: 15px;
}

.usr-mdl-btn {
  min-height: 35px;
  padding: 3px 15px;
  border-radius: 10px;
  outline: none;
  transition: 0.2s ease;
}

.ncknm-save-btn {
  color: #eee;
  background: #27c8b7;
  border: none;
}

.ncknm-save-btn:hover,
.ncknm-save-btn:active {
  background: #148a7e;
  outline: none;
}

.ncknm-cancel-btn {
  color: #F028FD;
  border: 2px #F028FD solid;
  background: transparent;
}

.ncknm-cancel-btn:hover,
.ncknm-cancel-btn:active {
  color: #eee;
  background: #F028FD;
  outline: none;
} 

.ncknm-random-btn {
  background: transparent;
  color: #aaa;
  border: 2px #aaa solid;
  border-radius: 5px;
  position: absolute;
  right: 3px;
  top: 70%;
  transform: translateY(-50%);
  padding: 0 5px;
  min-height: min-content;
}

.ncknm-random-btn:hover {
  background: var(--primary-soft);
}


#cancellation-modal {
  background-color: var(--primary-dark);
  color: #aaa;
  outline: none;
  border-radius: 10px;
  overflow: hidden;

  & .cancel-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;

    & .cancel-img {
      min-width: 300px;
      transform: scaleX(-1);
    }

    & > img {
      /* width: 90dvw; */
      max-height: 100dvh;
    }

    & p {
      text-align: center;
      font-size: 2rem;
    }

    & h2 {
      text-align: center;
      text-wrap: balance;
    }

    & form {
      width: 90%;
      max-width: 300px;
      display: flex;
      flex-direction: column;
      gap: 30px;
      align-items: center;
    }

    & input {
      width: 100%;
      max-width: 300px;
      background: #0c3c53;
      border: none;
      outline: none;
      box-shadow: inset -11px 11px 5px -10px rgba(0,0,0,0.5);
      padding: 5px;
      color: #fff;
      transition: background 0.2s ease;
      font-size: 1.3rem;
    }
  }
  & .cancel-btns-cont {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
}

.confirm-cancel-cont {
  gap: 30px;
  max-width: 1000px;

  & h3 {
    color: var(--primary-white)
  }

  & .cancel-form-left {
    gap: 10px;

    & img {
      filter: drop-shadow(0px 0px 9px hsla(0deg, 0%, 0%, 0.6));
    }
  }

  & .cancel-form-cont {
    gap: 20px;

    & form {
      width: 100%;
    }
  }
}



/* -------------------------- MOBILE SLIDER --------------------------- */

.mobile-slider-container {
  width: 100%;
  height: 60vw;
  position: relative;
  overflow: hidden;
  display: none;
  background: var(--primary-soft);
}

.mobile-slider {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.mob-img {
  position: absolute;
  top: 50%;
  transition: all 0.5s ease;
  width: 100%;
  height: 85%;
  border-radius: 15px;
  background-color: var(--primary-soft);
  background-image: var(--mob-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

.mob-slide-tv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #eee;
}

.mob-slide-tv h3 {
  font-size: 4vw;
  font-weight: 600;
  text-shadow: rgb(77, 64, 14) 1px 1px 6px;
}

.mob-slide-tv iframe {
  width: 75%;
  max-height: 70%;
  border-radius: 15px;
  box-shadow: 1px 1px 38px 14px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 1px 1px 38px 14px rgba(0, 0, 0, 0.35);
}

.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5rem;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  padding: 20px;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.3);
  background-color: rgba(0, 0, 50, 0.1);
}
.slide-btn:focus {
  border: none;
  outline: none;
}
.slider-next {
  right: -55px;
  text-align: left;
}

.slider-prev {
  left: -55px;
  text-align: right;
}

/* ---------------------- EXTRA SECTION ----------------------- */

#extras-section {
  padding: 20px 0 20px 0;
  scroll-behavior: smooth;
  background-color: var(--primary-soft);
}

#extras-section h1 {
  color: #eee;
  width: 90%;
  max-width: 1920px;
  margin: 0 auto 30px auto; 
}

.extras-section-container {
  width: 90%;
  max-width: 1920px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.extras-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.post-element {
  display: flex;
  flex-direction: column;
  height: 500px;
  min-height: 500px;
  max-width: 335px;
  background: var(--primary-dark);
  background-image: radial-gradient( farthest-corner at 0px 0px, var(--primary-dark) 50%, #532257 185% );
  border-radius: 10px;
  padding: 20px;
  gap: 15px;
  overflow: hidden;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}

.post-element hr {
  margin: 0;
  width: 120%;
  transform: translateX(-10%);
  border-bottom: #666 1px solid;
}

.post-title {
  display: flex;
  gap: 10px;
}

.post-title h3 {
  font-size: 1.3rem;
  color: #ccc;
  margin: 0;
}

.post-title h4 {
  font-size: 1.2rem;
  margin: 0;
}

.post-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.post-content p {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  max-width: 100%;
  padding: 10px 10px 10px 0;
  margin: 0;
}

.post-content p a {
  max-width: 100%;
  inline-size: 101%;
  overflow-wrap: break-word;
}

.post-content img {
  height: 90%;
  max-height: 245px;
  max-width: 100%;
  border-radius: 5px;
}

/* ------------------------- Suspended User Payment Notice -------------------------------- */

.suspended-user-alert {
  border: var(--badge-orange) 4px dashed;
  border-radius: 10px;
  padding: 40px;
  
  & > div {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;

    & span {
      color: var(--primary-white);
      font-size: 1.3rem;
    }

    & a {
      font-size: 1.4rem;
      padding: 0.5rem 1rem;
    }

    & a:hover {
      color: var(--primary-white);
      background: var(--badge-orange);
    }
  }
}




/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------- MEDIA QUERIES ------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------- */
/* -------- login --------- */

/* general */

@media (max-width: 600px) {
  .primary-title {
    font-size: 1.4rem;
  }
  #message-container {
    width: 90%;
    right: 3vw;
  }
}

@media (max-width: 895px) {
  .login-section {
    /* height: calc(100dvh + 92px); */
    width: 85%;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
  }
  .login-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: center;
  }
  .login-hero h2 {
    font-size: 1.4rem;
  }
  
}


/* ----- landing ----- */
@media (max-width: 895px) {
  #hero-expand {
    height: 40vw;
  }
  .hero-ex, .hero-expanded {
    width: 25%;
    background-image: var(--bg-mini);
  }
  .hero-container {
    display: none;
  }
  .mobile-slider-container {
    display: block;
  }
  /* landing games */
  .landing-games {
    padding: 10px 0 30px 0;
  }
}

@media (max-width: 600px) {
  #main h2 {
    font-size: 1.5rem;
  }
  .mob-img .buy-btn {
    font-size: 3vw;
    padding: 1.5vw 8vw 1.5vw 4vw;
  }
  .mob-img .buy-btn::after {
    width: 8vw;
    height: 8vw; 
    background-size: 6vw 6vw;
  }
  .land-game-row {
    gap: 15px;
  }
  
}

@media (max-width: 560px) {
  #hero-expand {
    height: 20vh;
  }
  .hero-img-2 h4,
  .hero-img-3 h4,
  .hero-img-4 h4 {
    font-size: 13px;
  }
}


/* ----- GAME CARDS ----- */
@media (max-width: 600px) {
  
  .game-card1 {
    min-height: 140px;
    width: 100%;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 45% 55%;
    border-radius: 10px;
  }
  .gc-img-cont {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
 
  .gc-info {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .gc-info h4 {
    font-size: 0.95rem;
  }
  .gc-info span {
    font-size: 0.85rem;
  }

  .gc-btns {
    justify-content: end;
  }

  .gc-btns p {
    font-size: 0.6rem;
    border-radius: 5px;
    padding: 2px 6px;
    position: absolute;
    top: -3px;
    left: -3px;
    box-shadow: 0px 0px 15px 4px rgba(0, 0, 0, 0.25);
  }
  .gc-btn {
    padding: 4px 27px 4px 13px!important;
    margin: 0 9px 0 0!important;
    font-size: 0.7rem!important;
  }
  
  .gc-btn::after {
    width: 27px!important;
    height: 27px!important; 
    background-size: 18px 18px!important;
  }
  /* giveaways cards - removido */
}

@media (max-width: 330px) {
  .gc-info h4 {
    font-size: 0.85rem;
  }
  .gc-info span {
    font-size: 0.75rem;
  }
  /* giveaways cards - removido */
}

/* -------- GAMES SECTION --------- */
@media (max-width: 940px) {

  .game-info-container {
    padding: 10px 0;
  }
  .game-info-data-container {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .game-info-main-game {
    width: 100%;
    min-height: 350px;
  }

  .main-game-img {
    min-height: 220px;
  }
  .game-info-main-description {
    width: 100%;
    height: 50%;
    padding-bottom: 80px;
  }
  .game-info-terms-redeem {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .games-section-container > h1 {
    font-size: 1.5rem;
  }
  .games-section-container {
    display: flex;
    flex-direction: column;
  }
  #game-card-async-cont {
    width: 100%;
  }
  .game-card-container {
    gap: 12px;
    width: 100%;
    margin: 0 auto;
  }
  .game-card-container .game-card1 {
    width: 100%;
  }
  .game-filter-section {
    position: fixed;
    max-height: 75%;
    overflow: auto;
    left: 0;
    top: 16%;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.4s ease, visibility 0.4s ease;
    z-index: 5;
  }
  .game-filter-section.active {
    transform: translateX(0%);
    visibility: visible;
  }
  .filt-mob-btn {
    display: block;
  }
  .pag-btns-nav {
    padding: 0px 0px 30px 0px;
  }
  /* games info */
  .g-info-m-g-data h1,
  .game-info-main-description h2 {
    font-size: 1.2rem;
  }
  .game-info-main-description h3 {
    font-size: 1.1rem;
  }
  .game-info-main-description p {
    font-size: 1rem;
  }
  .game-info-main-game .prod-credit-cost {
    font-size: 0.8rem;
  }
  .game-info-terms-redeem h4 {
    font-size: 1.1rem;
  }
  .gicm-data-cont h2 {
    font-size: 1.5rem;
  }
  .gicm-data-cont h3, .gicm-data-cont span {
    font-size: 1.1rem;
  }
  #game-info-confirmation-btn::after {
    width: 38px!important;
    height: 38px!important;
    background-size: 24px 24px!important;
  }
}

@media (max-width: 370px) {
  .gicm-btn-cont {
    flex-direction: column;
    align-items: start;
  }
  #game-info-confirmation-btn {
    padding: 7px 35px 7px 15px!important;
    font-size: 0.9rem!important;
  }
}

@media (max-width: 330px) {
  .games-info-header {
    flex-direction: column;
    align-items: start;
    gap: 10px;
  }
}

/* ------ giveaways section - removido ------ */

/* ---------- full access ---------- */

@media (max-width: 600px) {
  .fa-pres-img {
    & img {
      height: 20dvh;
    }
  }
  .fa-games-section .game-card-container {
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(95dvw, 1fr));
    grid-gap: 20px;
    margin: 0 auto;
  }
  .fa-section-container h2 {
    font-size: 1.5rem;
  }
  .fa-presentation.section-hero-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .fa-game-card {
    height: 140px;
    width: 350px;
    max-width: 100%;
    padding: 12px 20px 12px 2px;
    gap: 10px;
    overflow: hidden;
    border-radius: 15px;
  }
  .fa-info h4 {
    font-size: 0.9rem;
  }

  .fa-info span {
    font-size: 0.7rem;
  }

  .fa-btns {
    justify-content: end;
  }
  
  .fa-btns p {
    font-size: 0.6rem;
    width: 90px;
    text-align: center;
    padding: 3px 7px;
    z-index: 2;
    position: absolute;
    top: 11px;
    left: -22px;
    transform: rotate(-42deg);
    box-shadow: 0px 0px 15px -4px rgba(0, 0, 0, 0.25);
  }
  
  .fa-btn {
    padding: 5px 30px 5px 15px!important;
    margin: 0 9px 0 0!important;
    font-size: 0.75rem!important;
  }
  
  .fa-btn::after {
    width: 30px!important;
    height: 30px!important; 
    background-size: 20px 20px!important;
  }
}

/* user data section */

@media (max-width: 750px) {
  .user-space-container {
    flex-direction: column;
  }
  .user-space-container h2 {
    font-size: 1.2rem;
  }
  .user-space-container h3 {
    font-size: 1.1rem;
  }
  .user-space-data {
    align-items: center;
    text-align: center;
  }
  .u-spc-data-cont {
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
  
  .table thead th {
    font-size: 1rem; 
  }

  #usr-chnge-modal {
    padding: 20px 15px;
  }
  #usr-chnge-modal form {
    flex-direction: column;
  }
  .usr-mdl-btn {
    padding: 5px 10px;
  }
  .ncknm-random-btn {
    padding: 0 5px;
  }

  #cancellation-modal {
    & .cancel-cont {
      & .cancel-img {
        min-width: 150px;
      }
    }
  }
}

@media (max-width:600px) {
  .table {
    display: block;
  }
}

/* extras section */

@media (max-width: 350px) {
  .post-element {
    max-width: 90vw;
  }
}