/* ===================== ESTILOS ESPECÍFICOS VIEW-FRASE-JUGADOR ===================== */
/* Nota: Estilos base (fonts, reset, body, animaciones comunes, banner-apodo-jugador) están en yonunca_base.css */

/* ===================== SCROLL OCULTO PERO FUNCIONAL ===================== */
#view-frase-jugador {
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;  /* IE y Edge */
  scrollbar-width: none;  /* Firefox */
}

#view-frase-jugador::-webkit-scrollbar {
  display: none;  /* Chrome, Safari y Opera */
}

/* ===================== BODY ESPECÍFICO FRASE-JUGADOR ===================== */
#view-frase-jugador body {
  min-height: 100vh;
  height: auto;
  display: flex;
  justify-content: center;
  font-family: 'Arial', sans-serif;
  background: none;
  padding-bottom: 8vh; /* Espacio para el banner del apodo */
}

/* ===================== CONTAINER ESPECÍFICO FRASE-JUGADOR ===================== */
#view-frase-jugador .container {
  text-align: center;
  min-height: 100vh;
  padding-bottom: 10vh; /* Espacio adicional para el banner */
  display: flex;
  flex-direction: column;
}

/* ===================== LOGO CONTAINER ESPECÍFICO FRASE-JUGADOR ===================== */
/* Logo container único para frase-jugador - sin herencia */
.logo-container_frase_jugador {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}

/* Logo único para frase-jugador - sin herencia */
.logo_frase_jugador {
  font-size: 8vw;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  width: 90vw;
  height: auto;
  margin-top: 4vh;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
  display: block;
}

/* ===================== HEADINGS ESPECÍFICOS FRASE-JUGADOR ===================== */
#view-frase-jugador h1 {
  font-size: 12vw;
  font-weight: bold;
  margin-bottom: 4vh;
  margin-top: 6vh;
  font-family: 'ChauPhilomeneOne-Regular', sans-serif;
  letter-spacing: 0.3vw;
  color: #ffffff;
  text-shadow: 0.2vw 0.2vw 0.4vw rgba(0, 0, 0, 0.8), -0.1vw -0.1vw 0.2vw rgba(255, 255, 255, 0.3);
  transition: transform 0.3s ease, text-shadow 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* ===================== FORM ELEMENTS ESPECÍFICOS FRASE-JUGADOR ===================== */
#view-frase-jugador label {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  white-space: nowrap;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: transparent;
}

#view-frase-jugador .core-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5vh;
  margin-bottom: 2vh;
}

#view-frase-jugador .input-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 1vh;
  background-color: #f2f2f2;
  border-radius: 5vh;
  padding: 1vw 2vh;
  width: 90%;
}

#view-frase-jugador .icon {
  width: 1.5rem;
  height: auto;
  margin-right: 1vw;
}

#view-frase-jugador .input-field {
  border: none;
  background-color: transparent;
  outline: none;
  font-size: 7.5vw;
  width: 100%;
  padding: 1vw;
  font-family: 'ChauPhilomeneOne-Regular', sans-serif;
  word-wrap: break-word;
  overflow: hidden;
  align-content: center;
}

/* ===================== BUTTONS ESPECÍFICOS FRASE-JUGADOR ===================== */
#view-frase-jugador .button-container {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  width: 80%;
  height: auto;
  margin-top: 2vh;
  margin-bottom: 6vh;
  align-items: center;
}

#view-frase-jugador .btn-enviar {
  background-color: #4b3810; 
  color: white;
  padding: 4vw 4vh;
  font-size: 6vw;
  text-decoration: none;
  border-radius: 4vh;
  transition: background-color 0.3s ease;
  font-family: 'ChauPhilomeneOne-Regular', sans-serif;
  width: 90%;
  border: none;
  cursor: pointer;
}

#view-frase-jugador .btn-crearFrase {
  background-color: #29211d;
  color: white;
  padding: 4vw 4vh;
  font-size: 6vw;
  text-decoration: none;
  border-radius: 4vh;
  transition: background-color 0.3s ease;
  font-family: 'ChauPhilomeneOne-Regular', sans-serif;
  width: 90%;
  border: none;
  cursor: pointer;
}

/* ===================== ERROR TEXT ESPECÍFICO FRASE-JUGADOR ===================== */
#view-frase-jugador .error-text {
  color: red;
  font-size: 0.9rem;
  margin-top: 5px;
  text-align: center;
}