/* =================================================================== */
/* INFO-JOGOS — CSS SEGURO PARA PÁGINA DIRETA E SPA                    */
/* =================================================================== */

body.game-info-public-body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(15, 92, 150, 0.16), transparent 34%),
    linear-gradient(180deg, #050816, #02040d);
}

#spa-subpage-container .game-info-public-page,
body.game-info-public-body .game-info-public-page {
  isolation: isolate;
}

.game-info-public-page .video-wrapper iframe,
.game-info-public-page .video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =================================================================== */
/* INFORMAÇÕES DE JOGOS — LANDING PAGE PROFISSIONAL                    */
/* =================================================================== */
body.game-info-public-body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(15, 92, 150, 0.16), transparent 34%),
    linear-gradient(180deg, #050816, #02040d);
}

.game-info-public-page,
.game-info-public-page * {
  box-sizing: border-box;
}

.game-info-public-page {
  width: min(calc(100% - 30px), 1380px);
  max-width: 1380px;
  min-width: 0;
  margin: 0 auto;
  padding: 20px 0 35px !important;
  overflow-x: hidden;
}

.game-info-public-page .game-page-hero {
  position: relative;
  height: clamp(330px, 31vw, 430px);
  margin: 0 0 16px;
  overflow: hidden;
  isolation: isolate;
  background: #07101d;
  border: 1px solid rgba(79, 195, 247, 0.28);
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.3);
}

.game-info-public-page .game-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 9, 20, 0.96), rgba(4, 13, 28, 0.78) 38%, rgba(4, 13, 28, 0.1) 100%),
    linear-gradient(0deg, rgba(3, 8, 18, 0.42), transparent 50%);
}

.game-info-public-page .game-page-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.game-info-public-page .gp-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 42px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  background: transparent;
}

.game-info-public-page .game-info-eyebrow {
  margin-bottom: 5px;
  color: #59d3ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.game-info-public-page .gp-hero-overlay h1 {
  max-width: 690px;
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 4vw, 53px);
  line-height: 1.06;
  text-transform: none;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.68);
  overflow-wrap: anywhere;
}

.game-info-public-page .gp-hero-overlay p {
  max-width: 590px;
  margin: 10px 0 19px;
  color: #c2d0dc;
  font-size: 14px;
  line-height: 1.55;
}

.game-info-public-page .btn-neon {
  min-height: 47px;
  padding: 11px 22px;
  color: #fff;
  background: linear-gradient(90deg, #25c8ff, #0174ae);
  border: 1px solid rgba(96, 165, 250, 0.72);
  border-radius: 10px;
  box-shadow: 0 9px 22px rgba(0, 92, 145, 0.27);
  font-size: 13px;
  letter-spacing: 0.015em;
  text-transform: none;
}

.game-info-public-page .game-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(320px, 0.66fr);
  gap: 16px;
  align-items: stretch;
}

.game-info-public-page #game-video-panel {
  grid-column: 1;
  padding: 10px !important;
  display: flex;
  flex-direction: column;
}

.game-info-public-page .gp-right {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.game-info-public-page #panel-sobre-jogo {
  grid-column: 1 / -1;
  margin: 0;
}

.game-info-public-page .card-panel {
  min-width: 0;
  margin: 0;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 200, 255, 0.055), transparent 34%),
    linear-gradient(180deg, rgba(16, 27, 46, 0.97), rgba(9, 16, 29, 0.97));
  border: 1px solid rgba(79, 195, 247, 0.18);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}

.game-info-public-page .card-panel h3 {
  position: relative;
  margin: 0 0 15px !important;
  padding-left: 13px;
  color: #fff !important;
  font-size: 13px !important;
  letter-spacing: 0.075em;
  text-align: left !important;
}

.game-info-public-page .card-panel h3::before {
  content: "";
  position: absolute;
  inset: 2px auto 2px 0;
  width: 3px;
  background: linear-gradient(#59d3ff, #0174ae);
  border-radius: 999px;
}

.game-info-public-page .video-wrapper {
  width: 100%;
  padding-bottom: 56.25%;
  flex: 1 1 auto;
  background: #030814;
  border: 1px solid rgba(79, 195, 247, 0.2);
  border-radius: 12px;
}

.game-info-public-page .game-details-list {
  display: grid;
  gap: 9px;
}

.game-info-public-page .game-details-list li {
  min-width: 0;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  gap: 12px;
  background: rgba(255, 255, 255, 0.024);
  border: 1px solid rgba(143, 163, 184, 0.1);
  border-radius: 9px;
}

.game-info-public-page .game-details-list .lbl {
  width: auto;
  color: #71869a;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.game-info-public-page .game-details-list .val {
  min-width: 0;
  color: #e8f3fb;
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
  overflow-wrap: anywhere;
}

.game-info-public-page .game-challenge-card {
  padding: 22px 20px !important;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background:
    radial-gradient(circle at top, rgba(37, 200, 255, 0.12), transparent 47%),
    linear-gradient(145deg, rgba(14, 32, 53, 0.98), rgba(8, 16, 29, 0.98));
}

.game-info-public-page .game-challenge-card h3 {
  padding-left: 0;
  text-align: center !important;
}

.game-info-public-page .game-challenge-card h3::before {
  display: none;
}

.game-info-public-page .game-challenge-card p {
  color: #8fa3b8 !important;
  font-size: 12px;
  line-height: 1.55;
}

.game-info-public-page .game-rules-card {
  padding: 22px 24px 25px;
}

.game-info-public-page .game-desc-text {
  color: #aebdca;
  font-size: 13px;
  line-height: 1.78;
  overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
  .game-info-public-page .game-page-grid {
    grid-template-columns: 1fr;
  }

  .game-info-public-page .gp-right {
    display: contents;
  }

  .game-info-public-page #game-video-panel { order: 1; }
  .game-info-public-page .game-details-card { order: 2; }
  .game-info-public-page #panel-sobre-jogo {
    grid-column: 1;
    order: 3;
  }
  .game-info-public-page .game-challenge-card { order: 4; }
}

@media (max-width: 700px) {
  .game-info-public-page {
    width: calc(100% - 16px);
    padding-top: 10px !important;
  }

  .game-info-public-page .game-page-hero {
    height: 235px;
    border-radius: 14px;
  }

  .game-info-public-page .gp-hero-overlay {
    padding: 16px;
    gap: 0;
  }

  .game-info-public-page .game-info-eyebrow {
    font-size: 11px;
  }

  .game-info-public-page .gp-hero-overlay h1 {
    max-width: 84%;
    font-size: clamp(23px, 8vw, 33px);
  }

  .game-info-public-page .gp-hero-overlay p {
    display: block;
    max-width: 80%;
    margin: 7px 0 12px;
    font-size: 11px;
  }

  .game-info-public-page .btn-neon {
    min-height: 39px;
    padding: 8px 15px;
    font-size: 11px;
  }

  .game-info-public-page .game-page-grid {
    gap: 11px;
  }

  .game-info-public-page .card-panel {
    padding: 15px 13px;
    border-radius: 13px;
  }

  .game-info-public-page #game-video-panel {
    padding: 8px !important;
  }

  .game-info-public-page .game-details-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .game-info-public-page .game-details-list .val {
    text-align: left;
  }

  .game-info-public-page .game-desc-text {
    font-size: 12px;
    line-height: 1.7;
  }
}


/* K2GAMES — TIPOGRAFIA PADRONIZADA DA PÁGINA PÚBLICA DO JOGO */
.game-info-public-hero h1,
#game-page-title { font-size: clamp(32px, 4vw, 53px); }
.game-info-eyebrow,
.game-info-public-page .tag,
.game-info-public-page .stat-label { font-size: var(--k2-font-caption, 12px); }
.game-info-public-hero p,
.game-info-public-page .game-desc-text,
.game-info-public-page .game-desc-text p,
.game-info-public-page .game-desc-text li { font-size: var(--k2-font-body, 16px); }
.game-info-public-page h2,
.game-info-public-page h3,
.game-info-public-page .panel-title { font-size: var(--k2-font-section-title, 21px); }
.game-info-public-page .stat-value,
.game-info-public-page .game-highlight { font-size: var(--k2-font-card-title, 17px); }
.game-info-public-page .btn,
.game-info-public-page .btn-play-green { font-size: var(--k2-font-control, 15px); }
@media (max-width: 700px) {
  .game-info-public-hero h1,
  #game-page-title { font-size: clamp(25px, 8vw, 34px); }
  .game-info-public-hero p,
  .game-info-public-page .game-desc-text,
  .game-info-public-page .game-desc-text p,
  .game-info-public-page .game-desc-text li { font-size: 14px; }
}

/* ===================================================================
   K2GAMES — AJUSTES PARA TELAS 2K E 4K
   =================================================================== */
@media (min-width: 2200px) and (max-width: 3199px) {
  .game-info-public-page {
    width: min(calc(100% - 4vw), 78vw);
    max-width: none;
    padding-bottom: 48px !important;
  }

  .game-info-public-page .game-page-hero {
    height: clamp(500px, 26vw, 620px);
    margin-bottom: 22px;
    border-radius: 22px;
  }

  .game-info-public-page .gp-hero-overlay {
    padding: 56px;
  }

  .game-info-public-page .gp-hero-overlay h1,
  #game-page-title {
    max-width: 900px;
    font-size: clamp(62px, 3vw, 80px);
  }

  .game-info-public-page .gp-hero-overlay p {
    max-width: 760px;
    font-size: var(--k2-font-body);
  }

  .game-info-public-page .game-page-grid,
  .game-info-public-page .gp-right {
    gap: 22px;
  }

  .game-info-public-page .card-panel {
    padding: 28px;
    border-radius: 20px;
  }
}

@media (min-width: 3200px) {
  .game-info-public-page {
    width: min(calc(100% - 5vw), 78vw);
    max-width: none;
    padding-bottom: 64px !important;
  }

  .game-info-public-page .game-page-hero {
    height: clamp(680px, 25vw, 820px);
    margin-bottom: 28px;
    border-radius: 27px;
  }

  .game-info-public-page .gp-hero-overlay {
    padding: 76px;
  }

  .game-info-public-page .gp-hero-overlay h1,
  #game-page-title {
    max-width: 1180px;
    font-size: clamp(86px, 2.65vw, 106px);
  }

  .game-info-public-page .gp-hero-overlay p {
    max-width: 980px;
    font-size: var(--k2-font-body);
  }

  .game-info-public-page .game-page-grid,
  .game-info-public-page .gp-right {
    gap: 28px;
  }

  .game-info-public-page .card-panel {
    padding: 36px;
    border-radius: 25px;
  }
}