/* ==========================================================================
   GK TANK · CARD CENTRAL DE ACESSO NO HERO (COMPATÍVEL COM GAME-LOGIN 25173)
   Mesma proporção, paleta creme-perolada, borda bronze/ouro e botões do jogo
   ========================================================================== */

.nova-home .cr-hero.cr-hero-center > #acesso.cr-auth {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 5 !important;
  width: min(392px, calc(100% - 28px)) !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 196px auto 20px !important;
  padding: 18px 22px 16px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #fffdf6 0%, #f4f9ff 58%, #e8f3ff 100%) !important;
  border: 2.5px solid #825626 !important;
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 0 0 1.5px rgba(242, 190, 84, 0.35),
    0 20px 44px rgba(5, 16, 38, 0.58) !important;
  color: #14325c !important;
}

/* Cabeçalho discreto estilo subtítulo de servidor do jogo */
.nova-home .cr-hero > #acesso.cr-auth > .cr-panel-head {
  display: none !important;
}

.nova-home .cr-hero > #acesso.cr-auth [data-auth-slot] > h2 {
  margin: 0 0 3px !important;
  text-align: center !important;
  color: #123461 !important;
  font-family: var(--cr-font-display) !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.nova-home .cr-hero > #acesso.cr-auth .auth-subtitle {
  margin: 0 0 12px !important;
  text-align: center !important;
  color: #46668d !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.nova-home .cr-hero > #acesso.cr-auth .auth-identity {
  display: none !important;
}

/* Abas Entrar / Criar conta elegantes */
.nova-home .cr-hero > #acesso.cr-auth .tabs,
body #conteudo .native-auth .tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  padding: 4px !important;
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  background: #dfecf9 !important;
  border: 1.5px solid #9abbe0 !important;
  box-shadow: inset 0 1px 2px rgba(15, 44, 86, 0.08) !important;
}

.nova-home .cr-hero > #acesso.cr-auth .tabs button,
body #conteudo .native-auth .tabs button {
  min-height: 35px !important;
  padding: 6px 12px !important;
  border-radius: 9px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #214b7e !important;
  font-family: var(--cr-font-display) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

.nova-home .cr-hero > #acesso.cr-auth .tabs button[aria-selected="true"],
body #conteudo .native-auth .tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, #ffd970 0%, #f1ad32 100%) !important;
  border-color: #9a6414 !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 220, 0.9), 0 1px 3px rgba(18, 44, 82, 0.18) !important;
  color: #2b1803 !important;
}

/* Campos do formulário (respeitando [hidden] da aba inativa!) */
.nova-home .cr-hero > #acesso.cr-auth .form:not([hidden]),
body #conteudo .native-auth .form:not([hidden]) {
  display: grid !important;
  gap: 10px !important;
}

.nova-home .cr-hero > #acesso.cr-auth .form[hidden],
body #conteudo .native-auth .form[hidden] {
  display: none !important;
}

.nova-home .cr-hero > #acesso.cr-auth .field,
body #conteudo .native-auth .field {
  display: grid !important;
  gap: 4px !important;
}

.nova-home .cr-hero > #acesso.cr-auth .field > span,
.nova-home .cr-hero > #acesso.cr-auth .field > label,
body #conteudo .native-auth .field > span,
body #conteudo .native-auth .field > label {
  color: #163968 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.nova-home .cr-hero > #acesso.cr-auth .input,
body #conteudo .native-auth .input {
  width: 100% !important;
  min-height: 41px !important;
  padding: 8px 13px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1.5px solid #5685ae !important;
  box-shadow: inset 0 1px 2px rgba(15, 44, 86, 0.06) !important;
  color: #123159 !important;
  font-family: var(--cr-font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.nova-home .cr-hero > #acesso.cr-auth .input::placeholder,
body #conteudo .native-auth .input::placeholder {
  color: #7896b8 !important;
  font-weight: 500 !important;
}

.nova-home .cr-hero > #acesso.cr-auth .input:focus,
body #conteudo .native-auth .input:focus {
  outline: none !important;
  border-color: #2162a8 !important;
  box-shadow: 0 0 0 3px rgba(45, 122, 210, 0.22) !important;
}

/* Campo de senha com botão Mostrar discreto */
.nova-home .cr-hero > #acesso.cr-auth .password-wrap,
body #conteudo .native-auth .password-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.nova-home .cr-hero > #acesso.cr-auth .password-wrap .input,
body #conteudo .native-auth .password-wrap .input {
  padding-right: 76px !important;
}

.nova-home .cr-hero > #acesso.cr-auth .password-toggle,
body #conteudo .native-auth .password-toggle {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  background: #eaf3fc !important;
  border: 1px solid #96b8de !important;
  color: #1c487c !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.nova-home .cr-hero > #acesso.cr-auth .password-toggle:hover,
body #conteudo .native-auth .password-toggle:hover {
  background: #d8e9fa !important;
  border-color: #5685ae !important;
}

.nova-home .cr-hero > #acesso.cr-auth .form-error,
body #conteudo .native-auth .form-error {
  margin: 0 !important;
  min-height: 0 !important;
  color: #b42318 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-align: center;
}
.nova-home .cr-hero > #acesso.cr-auth .form-error:empty,
body #conteudo .native-auth .form-error:empty {
  display: none !important;
}

/* Botão principal idêntico ao "JOGAR AGORA" de game-login.png */
.nova-home .cr-hero > #acesso.cr-auth .btn-primary,
body #conteudo .native-auth .btn-primary {
  width: 100% !important;
  min-height: 44px !important;
  margin-top: 2px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ffd86f 0%, #f1ad32 100%) !important;
  border: 1.5px solid #986212 !important;
  box-shadow: inset 0 1px 0 #fff7d4, 0 3px 0 #7b4d0c !important;
  color: #2b1803 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.nova-home .cr-hero > #acesso.cr-auth .auth-help-link {
  display: block;
  text-align: center;
  margin-top: 2px;
  color: #23558f !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none;
}
.nova-home .cr-hero > #acesso.cr-auth .auth-help-link:hover {
  color: #0e3260 !important;
  text-decoration: underline;
}

.nova-home .cr-hero > #acesso.cr-auth .auth-bottom {
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(86, 133, 174, 0.25) !important;
  text-align: center !important;
  color: #4b6b92 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

@media (max-width: 760px) {
  .nova-home .cr-hero.cr-hero-center > #acesso.cr-auth {
    order: 3 !important;
    width: calc(100% - 20px) !important;
    margin: 10px auto 12px !important;
    padding: 16px 18px 14px !important;
  }
}