/* reset bem simples */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: #000000;
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* página toda centralizada */
.c4g-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: #000000;
}

/* wrapper da imagem gigante */
.c4g-bg-wrapper {
  position: relative;
  width: 100%;
  max-width: 11216px; /* largura original do seu arquivo */
  margin-inline: auto;
}

/* imagem em si */
.c4g-bg-image {
  display: block;
  width: 100%;
  height: auto;
}

/* hotspots gerais */
.hotspot {
  position: absolute;
  display: block;
  /*DEBUG
  border: 1px solid rgba(255, 0, 0, 0.6);
  background: rgba(0, 255, 0, 0.1);
  */
}

/*
  IMPORTANTE:
  Todos os top, left, width e height abaixo estão em porcentagem.
  Eles são aproximados, só para ficar clicável.
*/

/* menu topo */
.hotspot-menu-inicio {
  top: 0.6%;
  left: 30.4%;
  width: 4%;
  height: 1%;
}

.hotspot-menu-inscricoes {
  top: 0.6%;
  left: 37%;
  width: 7.4%;
  height: 1%;
}

.hotspot-menu-regulamento {
  top: 0.6%;
  left: 47.3%;
  width: 9%;
  height: 1%;
}

.hotspot-menu-redes {
  top: 0.6%;
  left: 60%;
  width: 9%;
  height: 1%;
}

/* cards de campeonatos na parte de cima */
.hotspot-card-conquest {
  top: 18.3%;
  left: 23%;
  width: 20.3%;
  height: 8.7%;
  border-radius: 40px;
}

.hotspot-card-speed {
  top: 18.3%;
  left: 55.8%;
  width: 20.3%;
  height: 8.7%;
  border-radius: 40px;
}

.hotspot-card-royale {
  top: 28%;
  left: 23%;
  width: 20.3%;
  height: 8.7%;
  border-radius: 40px;
}

.hotspot-card-scrim {
  top: 28%;
  left: 55.8%;
  width: 20.3%;
  height: 8.7%;
  border-radius: 40px;
}

/* ícones das redes na caixa de redes sociais */
.hotspot-social-x {
  top: 83.05%;
  left: 30.2%;
  width: 6%;
  height: 1.9%;
  border-radius: 20px;
}

.hotspot-social-yt {
  top: 83.05%;
  left: 41.7%;
  width: 6%;
  height: 1.9%;
  border-radius: 20px;
}

.hotspot-social-ig {
  top: 83.05%;
  left: 53.1%;
  width: 6%;
  height: 1.9%;
  border-radius: 20px;
}

.hotspot-social-fb {
  top: 83.05%;
  left: 64.7%;
  width: 6%;
  height: 1.9%;
  border-radius: 20px;
}

/* âncoras de scroll dentro do BG */
.c4g-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
}

/* topo da página, logo no começo do BG */
.c4g-anchor-topo {
  top: 0;
  left: 0;
}

/* ponto onde quer que pare ao clicar em "Inscrições" */
.c4g-anchor-inscricoes {
  top: 18%;
  left: 0;
}

/* ponto onde quer que pare ao clicar em "Redes sociais" */
.c4g-anchor-redes {
  top: 75%;
  left: 0;
}

/* página de regulamento */
.c4g-reg-page {
  background: #000000;
  justify-content: center;
}

.c4g-reg-wrapper {
  max-width: 960px;
  width: 100%;
  padding: 40px 16px 80px;
  color: #ffffff;
}

.c4g-reg-header h1 {
  font-size: 2.4rem;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.c4g-reg-header p {
  max-width: 720px;
  line-height: 1.6;
  margin-bottom: 32px;
}

.c4g-reg-voltar {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: #ffffff;
  opacity: 0.7;
}

.c4g-reg-voltar:hover {
  opacity: 1;
}

.c4g-reg-content h2 {
  font-size: 1.4rem;
  margin-top: 24px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.c4g-reg-content p {
  line-height: 1.6;
  margin-bottom: 12px;
}

/* responsivo simples */
@media (max-width: 768px) {
  .c4g-page {
    align-items: flex-start;
  }
}

/* página de registro de jogadores */

.c4g-registro-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 80px;
  padding: 0 16px;
}

.c4g-registro-header {
  max-width: 960px;
  margin: 0 auto 24px;
  color: #ffffff;
}

.c4g-registro-header h1 {
  font-size: 2.4rem;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.c4g-registro-camp-pill {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* concha com borda em degrade */

.c4g-registro-shell {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 28px;
  padding: 2px;
  background-image: linear-gradient(135deg, #ff244c, #386bff);
}

.c4g-registro-panel {
  border-radius: 24px;
  background: #101014;
  padding: 24px 24px 28px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  color: #ffffff;
}

/* passos do formulário */

.c4g-step {
  display: none;
}

.c4g-step-active {
  display: block;
}

.c4g-step h2 {
  font-size: 1.6rem;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.c4g-registro-note {
  max-width: 960px;
  margin: 16px auto 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
}

/* grid base de campos */

.c4g-form-grid {
  display: grid;
  gap: 16px 20px;
}

.c4g-form-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.c4g-field-full {
  grid-column: 1 / -1;
}

.c4g-field label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
}

.c4g-required {
  color: #ff4c4c;
  margin-left: 4px;
}

.c4g-field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #050509;
  color: #ffffff;
  font-size: 0.95rem;
}

.c4g-field input:focus {
  outline: none;
  border-color: #ff244c;
  box-shadow: 0 0 0 1px rgba(255, 36, 76, 0.6);
}

/* botões de ação */

.c4g-step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.c4g-btn {
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.c4g-btn-primary {
  background: linear-gradient(135deg, #ff244c, #386bff);
  color: #ffffff;
}

.c4g-btn-secondary {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* jogadores, duas colunas */

.c4g-player-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.c4g-player-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c4g-player-card {
  padding: 14px 14px 16px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.c4g-player-title {
  font-size: 1rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* responsivo simples para o registro */

@media (max-width: 900px) {
  .c4g-form-grid-2 {
    grid-template-columns: 1fr;
  }

  .c4g-player-grid {
    grid-template-columns: 1fr;
  }
}

/* bloco do horário da Scrim logo abaixo do título */
.c4g-scrim-top {
  max-width: 980px;
  margin: 0 auto 24px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  gap: 12px;
}

.c4g-scrim-top label {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
  white-space: nowrap;
}

.c4g-scrim-top select {
  flex: 1;
  background: #101018;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 6px 12px;
  color: #ffffff;
  font-size: 0.85rem;
}

/* grid dos planos de inscrição */
.c4g-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 18px;
}

/* card base dos planos */
.c4g-plan-card {
  position: relative;
  background: #151521;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 18px 18px 16px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease;
}

.c4g-plan-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
}

/* estado selecionado, borda com cara de degradê azul e vermelho */
.c4g-plan-card.c4g-plan-active {
  background: radial-gradient(circle at top left, #ff3b6e 0, #151521 55%),
              radial-gradient(circle at bottom right, #3b6fff 0, #151521 55%);
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(255, 59, 110, 0.9),
    0 0 0 2px rgba(59, 111, 255, 0.7),
    0 18px 38px rgba(0, 0, 0, 0.8);
}

/* cabeçalho dos cards, título e preço */
.c4g-plan-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.c4g-plan-title {
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 4px;
}

.c4g-plan-price {
  margin: 0;
  font-size: 0.9rem;
  color: #f5f5f5;
}

.c4g-plan-price-prefix {
  display: block;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* badge no canto direito do card */
.c4g-plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  white-space: nowrap;
}

.c4g-plan-badge-highlight {
  background: linear-gradient(135deg, #ff3b6e, #3b6fff);
  border-color: transparent;
}

/* lista de benefícios */
.c4g-plan-benefits {
  list-style: none;
  margin: 10px 0 14px;
  padding: 0;
  font-size: 0.85rem;
  color: #e6e6e6;
}

.c4g-plan-benefits li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 4px;
}

.c4g-plan-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3b6e, #3b6fff);
}

/* botão interno de escolher plano */
.c4g-plan-choose {
  width: 100%;
  margin-top: 4px;
  font-size: 0.82rem;
}

/* grupo do cupom, mais espaço embaixo dos cards */
.c4g-cupom-group {
  margin-top: 40px;      /* afasta dos cards */
}

/* input do cupom maior e alinhado */
.c4g-cupom-group input {
  width: 100%;
  max-width: 200px;
  padding: 10px 14px;
  border-radius: 6px;
}

/* alinhamento melhor do título da seção de planos */
.c4g-step-subtitle {
  margin-top: 18px;
  margin-bottom: 6px;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* responsivo, empilha melhor em telas menores */
@media (max-width: 768px) {
  .c4g-scrim-top {
    flex-direction: column;
    align-items: stretch;
    border-radius: 16px;
  }

  .c4g-plan-grid {
    grid-template-columns: 1fr;
  }
}

/* esconde o "A partir de" dentro dos cards de inscrição */
.c4g-price-label {
  display: none;
}

/* páginas de retorno de pagamento */

.c4g-return-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: radial-gradient(circle at top, #181825 0, #000000 60%);
  color: #ffffff;
}

.c4g-return-shell {
  max-width: 720px;
  width: 100%;
  border-radius: 28px;
  padding: 2px;
  background-image: linear-gradient(135deg, #ff244c, #386bff);
}

.c4g-return-card {
  border-radius: 24px;
  background: #101014;
  padding: 28px 24px 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

.c4g-return-logo {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.8;
  margin-bottom: 6px;
}

.c4g-return-title {
  font-size: 1.8rem;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.c4g-return-lead {
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 12px;
}

.c4g-return-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}

.c4g-return-ref {
  margin-top: 10px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
}

.c4g-return-actions {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.c4g-return-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.c4g-return-ref-inline {
  font-weight: 700;
  color: #4dff9a;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(77, 255, 154, 0.08);
}

/* variações de cor do título por status */

.c4g-return-success .c4g-return-title {
  color: #6bffb0;
}

.c4g-return-error .c4g-return-title {
  color: #ff5c7a;
}

.c4g-return-pending .c4g-return-title {
  color: #ffd479;
}

/* responsivo simples */
@media (max-width: 640px) {
  .c4g-return-card {
    padding: 22px 18px 20px;
  }

  .c4g-return-title {
    font-size: 1.4rem;
  }
}

/* AJUSTE NOS HOTSPOTS */
.hotspot-card-conquest,
.hotspot-card-speed,
.hotspot-card-royale,
.hotspot-card-scrim {
    display: block; /* Garante que o bloco ocupe a área */
    border: none;
    text-decoration: none;
    padding: 0; 
}

/* Estilo base do STATUS (Topo) */
.c4g-card-status {
    position: absolute; /* Permite mover livremente */
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.8vw; 
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    
    text-shadow: none; 

    /* Animação */
    opacity: 0; 
    transition: opacity 0.5s ease-in-out;
}

/* Estilo base do PREÇO (Rodapé) */
.c4g-card-footer {
    position: absolute; /* Permite mover livremente */
    background: transparent;
    display: flex;
    align-items: center;
}

.c4g-card-price {
    font-size: 1.3vw;
    font-weight: 800;
    color: #fff;
    background: transparent;
    
    text-shadow: none;

    /* Animação */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.element-loaded { opacity: 1 !important; }

/* Cores de status */
.c4g-card-status.open { color: #fff; } 
.c4g-card-status.closed { color: #ccc; }

/* --- 1. CONQUEST SERIES --- */
.hotspot-card-conquest .c4g-card-status {
    top: 65%;    /* subir/descer o texto 'Inscrição Aberta' */
    right: 4%;  /* esquerda/direita */
}
.hotspot-card-conquest .c4g-card-footer {
    bottom: 7.7%; /* subir/descer o Preço */
    right: 8.5%;  /* esquerda/direita */
}

/* --- 2. SPEED CONQUEST --- */
.hotspot-card-speed .c4g-card-status {
    top: 65%;
    right: 4%;
}
.hotspot-card-speed .c4g-card-footer {
    bottom: 7.7%;
    right: 9.8%;
}

/* --- 3. ROYALE CONQUEST --- */
.hotspot-card-royale .c4g-card-status {
    top: 65%;
    right: 4%;
}
.hotspot-card-royale .c4g-card-footer {
    bottom: 7%;
    right: 8.5%;
}

/* --- 4. SCRIM CONQUEST --- */
.hotspot-card-scrim .c4g-card-status {
    top: 65%;   /* Scrim geralmente precisa de ajuste diferente */
    right: 1%;
}
.hotspot-card-scrim .c4g-card-footer {
    bottom: 7%;
    right: 10%;
}

/* Página Regulamento */
.c4g-section-rules {
  padding: 80px 0;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 40px auto 0;
}

.rule-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  border-radius: 10px;
  text-decoration: none;
  background: radial-gradient(circle at top left, #ff244c, #386bff);
  color: #fff;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.rule-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  background: radial-gradient(circle at top left, #ff244c, #386bff);
}

.rule-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.rule-cta {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Ajuste da página de regulamento com cartão central */

.c4g-reg-page {
  background: #000000;
  justify-content: center;
}

/* wrapper vira um container central com flex */
.c4g-reg-wrapper {
  max-width: 1200px;
  width: 100%;
  padding: 80px 16px;
  color: #ffffff;

  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
}

/* cartão central, igual o estilo dos outros painéis */
.c4g-reg-card {
  width: 100%;
  max-width: 960px;
  border-radius: 24px;
  padding: 32px 40px 40px;
  background: #101014;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

/* mantém o header bonito dentro do cartão */
.c4g-reg-header h1 {
  font-size: 2.4rem;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.c4g-reg-header p {
  max-width: 720px;
  line-height: 1.6;
  margin-top: 12px;
  margin-bottom: 24px;
}

/* responsivo pro cartão */
@media (max-width: 768px) {
  .c4g-reg-card {
    padding: 24px 18px 28px;
  }
}