/* PLAYER RESPONSIVE LAYOUT - Basado en host.css */

/* ============================================= */
/* == LAYOUT PRINCIPAL CON FLEXBOX Y VIEWPORT == */
/* ============================================= */

/* MAIN RESPONSIVE LAYOUT */
body {
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100svh; /* Usa small viewport height para móviles */
}

#triviaViewer {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh; /* Usa small viewport height */
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

/* ============================================= */
/* == SECCIONES PRINCIPALES PROPORCIONALES == */
/* ============================================= */

/* HEADER SECTION - Proportional to viewport */
header {
  flex: 0 0 auto;
  height: 9vh;
  height: 9svh;
  min-height: 4rem;
  max-height: 5rem;
}

/* TRIVIA PREMIO HEADER - Proportional */
#triviaPremioHeader {
  flex: 0 0 auto;
  height: 17vh;
  height: 17svh;
  min-height: 4.8rem;
  max-height: 11rem;
  overflow: hidden;
}

/* SEPARADOR - Very small proportional */
.separador-10.perfil-host {
  flex: 0 0 auto;
  height: 0.5vh;
  height: 0.5svh;
  min-height: 0.2rem;
  max-height: 0.8rem;
}

/* MAIN MENU TABS - Proportional */
.tabs.mar-sides {
  flex: 0 0 auto;
  height: 5.5vh;
  height: 5.5svh;
  min-height: 1.8rem;
  max-height: 3.2rem;
  display: flex;
  align-items: center;
}

/* CONTENT WRAPPER - Takes remaining space */
#content-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ============================================= */
/* == CONTENIDO DENTRO DE PREGUNTA CONTAINER == */
/* ============================================= */

#preguntaContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* QUESTION PROGRESS - Proportional */
#preguntaContainer .center-col.mar-sides {
  flex: 0 0 auto;
  height: 4vh;
  height: 4svh;
  min-height: 1.8rem;
  max-height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.progress {
  height: clamp(1.4rem, 3vh, 2.2rem);
  font-size: clamp(0.9rem, 2.4vw, 1.4rem);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-text {
  font-size: clamp(1.08rem, 2.88vw, 1.68rem);
  font-weight: 700;
  padding: 0 clamp(0.8rem, 2vw, 1.5rem);
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  line-height: 1;
}

/* QUESTION TABS - Proportional */
#preguntaContainer .tabs.mar-sides {
  flex: 0 0 auto;
  height: 4.5vh;
  height: 4.5svh;
  min-height: 2rem;
  max-height: 3.5rem;
  display: flex;
  align-items: flex-end;
  overflow-x: auto;
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* QYA CONTAINER - Takes most remaining space */
#qyaContainer {
  flex: 1 1 auto;
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* QYA INTERNAL LAYOUT - Proportional */
#qyaContainer .question {
  flex: 0 0 auto;
  height: auto;
  min-height: 5rem;
  max-height: 9rem;
  padding: 0.5rem 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: hidden;
  position: relative;
}

/* Contenedor span de la pregunta */
#qyaContainer .question span.line-compact.mar-sides.center-ver {
  position: static !important;
  transform: none !important;
  top: auto !important;
  width: 100%;
  display: block !important;
}

#qyaContainer .question h2,
#qyaContainer .question span h2,
#qyaContainer .question span h2.line-compact,
#qyaContainer .question span h2.line-compact.mar-sides.center-ver {
  font-size: clamp(1.35rem, 4.5vw, 1.95rem) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  text-align: left !important;
  font-weight: 600 !important;
  font-style: normal !important;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box !important;
  -webkit-line-clamp: 3; /* 3 líneas para pantallas altas por defecto */
  -webkit-box-orient: vertical;
  width: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
  letter-spacing: normal !important;
  position: static !important;
  transform: none !important;
  top: auto !important;
}

#qyaContainer .timer-progress {
  flex: 0 0 auto;
  height: 2.5vh;
  height: 2.5svh;
  min-height: 1rem;
  max-height: 1.8rem;
  padding: 0.1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.timer-text {
  font-size: clamp(1.04rem, 2.6vw, 1.3rem);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
}

.timer-text > span {
  width: auto;
  font-size: clamp(1.04rem, 2.6vw, 1.3rem);
}

#qyaContainer .answers {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.05rem, 0.5vh, 0.2rem);
  padding: clamp(0.2rem, 1.6vh, 0.5rem) 0; /* Duplicado al doble */
  justify-content: space-between;
}

/* Margen específico para answerButtons */
#answerButtons {
  margin: clamp(0.075rem, 0.75vh, 0.3rem) 0;
}

#qyaContainer .answer {
  flex: 1;
  min-height: clamp(1.44rem, 6vh, 3.6rem);
  max-height: clamp(1.44rem, 6vh, 3.6rem);
  display: flex;
  align-items: center;
  padding: clamp(0.2rem, 0.8vh, 0.4rem) 0.8rem;
  margin: 0 auto;
  width: 95%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

#qyaContainer .answer .answer-text {
  font-size: clamp(1.15596rem, 3.6504vw, 1.46016rem) !important;
  line-height: clamp(1.2, 1.3, 1.4) !important;
  font-weight: 500;
  text-align: left;
  width: auto;
  z-index: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#qyaContainer .answer .answer-count {
  font-size: clamp(0.9126rem, 2.67696vw, 1.2168rem) !important;
  font-weight: 600;
  text-align: right;
  width: auto;
  z-index: 2;
  margin-left: auto;
  flex-shrink: 0;
}

/* Indicación visual de selección */
#qyaContainer .answer::before {
  content: "";
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
  top: -3px;
  left: -3px;
  bottom: -3px;
  right: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  z-index: 3;
  border: solid #ff7f00 5px;
  border-radius: 0.9rem;
}

#qyaContainer .answer.selected::before {
  opacity: 1;
  animation: titila 0.75s infinite alternate;
}

/* SPEND CREDITS BUTTONS - Proportional - AUMENTADO PARA BOTONES 40% MÁS ALTOS + 4% ALTURA + 6% ALTURA */
#spendCreditsButtons {
  flex: 0 0 auto;
  height: 14.63vh; /* Aumentado para compensar padding-top */
  height: 14.63svh;
  min-height: 6.91rem; /* Aumentado para compensar padding-top */
  max-height: 10.76rem; /* Aumentado para compensar padding-top */
  display: flex;
  align-items: center;
  justify-content: space-between; /* Cambio para mejor distribución */
  padding: clamp(1rem, 2.5vh, 1.5rem) clamp(0.5rem, 2vw, 1rem) 0.5rem; /* Más padding-top para separación */
  gap: clamp(0.3rem, 1vw, 0.6rem); /* Espacio entre botones */
}

/* RESPONSIVE PARA BOTONES DE CRÉDITOS */
/* Botones proporcionales en base al ancho de la pantalla - AUMENTADO 40% + 4% ALTURA + 6% ALTURA + 10% ANCHO */
#spendCreditsButtons button {
  height: clamp(4.32rem, 12.35vw, 5.41rem) !important;
  border-radius: calc(clamp(4.32rem, 12.35vw, 5.41rem) / 2) !important;
  width: clamp(93.5%, 99%, 104.5%) !important;
  max-width: 7.7rem !important;
  padding: 0 clamp(0.3rem, 1.5vw, 0.6rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Altura específica para botón de AYUDA - 6% MÁS ALTO SOBRE LA NUEVA BASE */
#ayudaButton button {
  height: clamp(4.58rem, 13.09vw, 5.73rem) !important;
  border-radius: calc(clamp(4.58rem, 13.09vw, 5.73rem) / 2) !important;
}

/* BOTÓN DE AYUDA EXPANDIDO PARA ACOMODAR DOS ICONOS HORIZONTALMENTE + 10% ANCHO */
#ayudaButton {
  flex: 0 0 auto !important;
  width: clamp(49.5%, 55%, 60.5%) !important; /* Más ancho que los otros botones + 10% */
  min-width: 8.8rem !important;
  max-width: 13.2rem !important;
}

#ayudaButton button {
  width: 100% !important;
  max-width: none !important;
  min-width: 8.8rem !important;
  padding: 0 clamp(0.4rem, 1.8vw, 0.8rem) !important;
  justify-content: flex-start !important; /* Alinear contenido a la izquierda */
}

/* AJUSTAR OTROS BOTONES PARA COMPENSAR EL BOTÓN DE AYUDA EXPANDIDO + 10% ANCHO */
#ralentizarButton, #duplicarButton {
  flex: 1 1 auto !important; /* Tomar el espacio restante equitativamente */
  min-width: 5.5rem !important;
  max-width: 8.8rem !important;
}

#ralentizarButton button, #duplicarButton button {
  min-width: 5.5rem !important;
  max-width: 8.8rem !important;
}

/* SVG icons proporcionales - AUMENTADO 40% */
#spendCreditsButtons button svg {
  height: clamp(2.52rem, 8.4vw, 3.36rem) !important;
  width: clamp(2.52rem, 8.4vw, 3.36rem) !important;
}

/* Monedas de créditos proporcionales - AUMENTADO 40% */
#spendCreditsButtons .cost-credits {
  width: clamp(2.8rem, 8.4vw, 3.5rem) !important;
  height: clamp(2.8rem, 8.4vw, 3.5rem) !important;
  line-height: clamp(2.8rem, 8.4vw, 3.5rem) !important;
  font-size: clamp(1.4rem, 4.48vw, 1.82rem) !important;
  border-radius: 50% !important;
  min-width: 2.8rem !important;
  max-width: 3.5rem !important;
}

/* Monedas específicas para botones de AYUDA y RALENTIZAR - 10% MÁS GRANDES */
#ayudaButton .cost-credits,
#ralentizarButton .cost-credits {
  width: clamp(3.08rem, 9.24vw, 3.85rem) !important;
  height: clamp(3.08rem, 9.24vw, 3.85rem) !important;
  line-height: clamp(3.08rem, 9.24vw, 3.85rem) !important;
  font-size: clamp(1.54rem, 4.93vw, 2.00rem) !important;
  min-width: 3.08rem !important;
  max-width: 3.85rem !important;
}

/* Textos descriptivos proporcionales - AUMENTADO 40% + 10% TIPOGRAFÍA + MARGIN REDUCIDO 50% */
#spendCreditsButtons p {
  font-size: clamp(1.155rem, 3.85vw, 1.54rem) !important;
  margin-top: clamp(0.175rem, 1.05vw, 0.35rem) !important;
  line-height: 1.2 !important;
}

/* Contenedor de duplicar proporcional - FLEX 1 PARA OCUPAR TODO EL ESPACIO + CENTRADO VERTICAL */
#spendCreditsButtons #duplicarButton button #displayDuplicar {
  flex: 1 !important; /* Ocupa todo el espacio disponible */
  min-width: 0 !important; /* Permite que flex funcione correctamente */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

/* Textos dentro del botón duplicar - AUMENTADO 40% + 10% TIPOGRAFÍA */
#spendCreditsButtons #duplicarButton button p {
  font-size: clamp(1.078rem, 3.388vw, 1.386rem) !important;
  line-height: clamp(1.232rem, 3.696vw, 1.54rem) !important;
  margin: 0 !important;
}

/* Iconos de ayuda proporcionales - ICONOS ALINEADOS A LA IZQUIERDA Y MÁS CERCA */
#spendCreditsButtons #ayudaIcons {
  width: clamp(66%, 77%, 88%) !important;
  max-width: 7.7rem !important; /* Más espacio para dos iconos lado a lado + 10% */
  overflow: visible !important; /* Permitir que iconos se muestren completamente */
  display: flex !important;
  justify-content: flex-start !important; /* Alinear iconos a la izquierda */
  align-items: center !important;
  gap: clamp(0.05rem, 0.2vw, 0.15rem) !important; /* Gap muy pequeño - casi tocándose */
}

/* ICONOS ESPECÍFICOS AGRANDADOS 30% ADICIONAL - REDUCIDO 6% */
/* Icono de "espera" en botón Ralentizar */
#ralentizarButton button svg {
  height: clamp(3.08rem, 10.26vw, 4.11rem) !important;
  width: clamp(3.08rem, 10.26vw, 4.11rem) !important;
}

/* Iconos de "ayudas" en botón Ayuda - CON AJUSTES DE CONTENEDOR */
#ayudaButton button {
  overflow: visible !important; /* Permitir que iconos grandes se muestren */
}

#ayudaButton {
  overflow: visible !important; /* Permitir que el contenedor del botón también sea visible */
}

#ayudaButton button svg#ayudaPrimera,
#ayudaButton button svg#ayudaSegunda {
  height: clamp(3.08rem, 10.26vw, 4.11rem) !important;
  width: clamp(3.08rem, 10.26vw, 4.11rem) !important;
  flex-shrink: 0 !important; /* Evitar que se reduzcan */
}

/* ============================================= */
/* == OPTIMIZACIONES DE TYPOGRAPHY RESPONSIVE == */
/* ============================================= */

/* ESTILOS ESPECÍFICOS PARA BARRA DE PROGRESO DE PREGUNTAS */
#questionProgress .progress {
  width: 100%;
  max-width: none;
  background-color: var(--col-pri-10-por);
  position: relative;
  overflow: hidden;
}

#questionProgress .progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--deg-pri-sec);
  transition: width 0.3s ease;
  border-radius: 0 clamp(0.4rem, 1.1vh, 0.5rem) clamp(0.4rem, 1.1vh, 0.5rem) 0;
}

#questionProgress .progress-text {
  position: relative;
  z-index: 2;
  color: var(--col-dar);
  text-transform: uppercase;
  letter-spacing: 0.1px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
}

#questionProgress .progress-text span {
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

#questionProgress .progress-text #currentQuestion,
#questionProgress .progress-text #totalQuestions {
  min-width: auto;
  width: auto;
  display: inline-block;
  margin: 0 0.3em;
}

/* ============================================= */
/* == SOLAPAS AGRANDADAS (SIGUIENDO HOST.CSS) == */
/* ============================================= */

/* SOLAPAS PRINCIPALES (Juego, Posiciones, Valoración) */
#mainMenu .gral-menu-btn {
  min-height: clamp(2.4rem, 5.2vh, 3.8rem) !important;
  font-size: clamp(1.2075rem, 3.105vw, 1.725rem) !important; /* 15% más grande */
  font-weight: 400 !important;
  padding: clamp(0.5rem, 1.1vh, 0.9rem) clamp(0.9rem, 2.2vw, 1.6rem) !important;
  border-radius: 0.55rem 0.55rem 0px 0px !important;
  letter-spacing: 0.6px !important;
  line-height: 1.2 !important;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease !important;
}

/* SOLAPAS DE PREGUNTAS NUMERADAS */
#questionTabs .gral-menu-btn,
#questionTabs .q-number-btn,
#questionTabs .tab {
  min-height: clamp(2rem, 4vh, 3rem) !important;
  min-width: clamp(2.8rem, 5.5vw, 4.5rem) !important;
  font-size: clamp(1.0925rem, 2.76vw, 1.61rem) !important; /* 15% más grande */
  font-weight: 400 !important;
  padding: clamp(0.4rem, 0.9vh, 0.7rem) clamp(0.5rem, 1.2vw, 1rem) !important;
  border-radius: 0.55rem 0.55rem 0px 0px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 clamp(0.05rem, 0.15vw, 0.15rem) !important;
  line-height: 1 !important;
  letter-spacing: 0.4px !important;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
}

/* SOLAPAS DE RANKING (General, Pregunta Actual) */
#posicionesContainer .tabs .gral-menu-btn,
#posicionesContainer .tabs .tab-ranking {
  min-height: clamp(2rem, 3.8vh, 3.2rem) !important;
  font-size: clamp(1.035rem, 2.53vw, 1.495rem) !important; /* 15% más grande */
  font-weight: 400 !important;
  padding: clamp(0.4rem, 0.8vh, 0.7rem) clamp(0.8rem, 2vw, 1.4rem) !important;
  border-radius: 0.55rem 0.55rem 0px 0px !important;
  letter-spacing: 0.4px !important;
  line-height: 1.1 !important;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
}

/* ============================================= */
/* == MEDIA QUERIES RESPONSIVAS ESCALONADAS == */
/* ============================================= */

/* RESPONSIVE ADJUSTMENTS FOR VERY SMALL SCREENS */
@media (max-height: 30rem) {
  /* Solo ajustes críticos para pantallas extremadamente pequeñas */
  #triviaPremioHeader {
    height: 15vh;
    height: 15svh;
    min-height: 5rem;
  }
  
  .separador-10.perfil-host {
    height: 0.5vh;
    height: 0.5svh;
    min-height: 0.2rem;
  }
  
  #qyaContainer .question {
    min-height: 4.5rem;
    max-height: 7.5rem;
  }

  #qyaContainer .question h2,
  #qyaContainer .question span h2,
  #qyaContainer .question span h2.line-compact,
  #qyaContainer .question span h2.line-compact.mar-sides.center-ver {
    font-size: clamp(1.2rem, 3.75vw, 1.65rem) !important;
    line-height: 1.2 !important;
    font-style: normal !important;
    -webkit-line-clamp: 3;
    display: -webkit-box !important;
  }
}

/* Flash animation for credits - DESTELLO MÁS NOTORIO */
.flash-credits {
  animation: flashEffect 0.8s ease-in-out;
}

@keyframes flashEffect {
  0% { 
    opacity: 1; 
    transform: scale(1); 
    color: var(--col-lig);
  }
  25% { 
    opacity: 0.1; 
    transform: scale(1.2); 
    color: #FFD700;
  }
  50% { 
    opacity: 1; 
    transform: scale(1.1); 
    color: #FFD700;
  }
  75% { 
    opacity: 0.2; 
    transform: scale(1.15); 
    color: #FFA500;
  }
  100% { 
    opacity: 1; 
    transform: scale(1); 
    color: var(--col-lig);
  }
}

@keyframes titila {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}

/* User coins display */
#userCoins {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fon-bol);
  color: var(--col-lig);
  /* Removido background-color y border-radius - solo debe mostrar texto sin fondo */
}

#userCoinsValue {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  width: auto;
}

/* ============================================= */
/* == ANIMACIÓN MONEDA CORREGIDA == */
/* ============================================= */

/* CRÍTICO: Sobreescribir animación de moneda para evitar velocidad excesiva 
   que se produce por conflictos entre trivia.css (10s) y otros archivos (25s) */
.elemento-girando {
  animation: giro 25s linear infinite !important;
}

@keyframes giro {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Asegurar que las monedas del header tengan la animación correcta */
.buy-coin.elemento-girando,
header .coin.elemento-girando,
#userCredits .coin.elemento-girando {
  animation: giro 25s linear infinite !important;
}

/* ============================================= */
/* == REGLA ESPECÍFICA PARA ASEGURAR FONT-SIZE DE RESPUESTAS == */
/* ============================================= */

/* FORZAR FONT-SIZE EN BOTONES DE RESPUESTAS - MÁXIMA ESPECIFICIDAD */
#qyaContainer .answers .answer .answer-text {
  font-size: clamp(1rem, 3.6vw, 1.35rem) !important;
  line-height: clamp(1.2, 1.3, 1.4) !important;
}

#qyaContainer .answers .answer .answer-count {
  font-size: clamp(0.9126rem, 2.67696vw, 1.2168rem) !important;
}

/* REGLAS ADICIONALES PARA BOTONES DE RESPUESTAS - MÁXIMA ESPECIFICIDAD */
#answerButtons .answer .answer-text,
#answerButtons button .answer-text,
.answer .answer-text {
  font-size: clamp(1.15596rem, 3.6504vw, 1.46016rem) !important;
  line-height: clamp(1.2, 1.3, 1.4) !important;
}

#answerButtons .answer .answer-count,
#answerButtons button .answer-count,
.answer .answer-count {
  font-size: clamp(0.9126rem, 2.67696vw, 1.2168rem) !important;
}

/* REGLAS UNIVERSALES PARA CUALQUIER TEXTO EN BOTONES DE RESPUESTA */
button.answer,
button[class*="answer"],
button[onclick*="answer"],
.answer button,
.answer,
#answerButtons button,
#answerButtons .answer {
  font-size: clamp(1.15596rem, 3.6504vw, 1.46016rem) !important;
  line-height: clamp(1.2, 1.3, 1.4) !important;
}

/* FORZAR FONT-SIZE EN TODOS LOS ELEMENTOS DE TEXTO DENTRO DE RESPUESTAS */
button.answer *,
button[class*="answer"] *,
button[onclick*="answer"] *,
.answer *,
#answerButtons button *,
#answerButtons .answer * {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Ajustes responsive para pantallas pequeñas */
@media (max-width: 480px) {
  #qyaContainer .question h2,
  #qyaContainer .question span h2,
  #qyaContainer .question span h2.line-compact,
  #qyaContainer .question span h2.line-compact.mar-sides.center-ver {
    font-size: clamp(1.25rem, 4.5vw, 1.8rem) !important;
    line-height: 1.3 !important;
    font-style: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    position: static !important;
    transform: none !important;
  }
  
  #qyaContainer .question span.line-compact.mar-sides.center-ver {
    position: static !important;
    transform: none !important;
    display: block !important;
  }
  
  /* Ajustes responsive para la barra de progreso */
  .progress {
    height: clamp(1.2rem, 2.5vh, 1.8rem);
    font-size: clamp(0.8rem, 2.2vw, 1.2rem);
  }
  
  .progress-text {
    font-size: clamp(0.96rem, 2.64vw, 1.44rem);
    padding: 0 clamp(0.6rem, 1.5vw, 1.2rem);
  }
  
  /* Solapas más pequeñas en móviles */
  #mainMenu .gral-menu-btn {
    font-size: clamp(0.9775rem, 2.53vw, 1.265rem) !important; /* 15% más grande */
    padding: clamp(0.3rem, 0.8vh, 0.6rem) clamp(0.6rem, 1.5vw, 1rem) !important;
    min-height: clamp(1.8rem, 4vh, 2.8rem) !important;
  }
  
  #questionTabs .gral-menu-btn,
  #questionTabs .q-number-btn,
  #questionTabs .tab {
    font-size: clamp(0.92rem, 2.3vw, 1.265rem) !important; /* 15% más grande */
    min-height: clamp(1.6rem, 3.5vh, 2.5rem) !important;
    min-width: clamp(2.2rem, 4.5vw, 3.5rem) !important;
    padding: clamp(0.25rem, 0.6vh, 0.5rem) clamp(0.4rem, 1vw, 0.8rem) !important;
    margin: 0 clamp(0.03rem, 0.08vw, 0.08rem) !important;
  }
  
  #posicionesContainer .tabs .gral-menu-btn,
  #posicionesContainer .tabs .tab-ranking {
    font-size: clamp(0.8625rem, 2.07vw, 1.15rem) !important; /* 15% más grande */
    min-height: clamp(1.5rem, 3vh, 2.3rem) !important;
    padding: clamp(0.25rem, 0.6vh, 0.5rem) clamp(0.6rem, 1.5vw, 1.1rem) !important;
  }
  
  /* BOTONES DE CRÉDITOS MÁS PEQUEÑOS EN MÓVILES + 4% ALTURA + 6% ALTURA */
  #spendCreditsButtons {
    height: 13.02vh !important; /* Aumentado para compensar padding-top */
    height: 13.02svh !important;
    min-height: 5.43rem !important; /* Aumentado para compensar padding-top */
    max-height: 8.92rem !important; /* Aumentado para compensar padding-top */
    padding: clamp(0.8rem, 2vh, 1.2rem) 0 0.3rem !important; /* Más padding-top en móviles */
  }
  
  #spendCreditsButtons button {
    height: clamp(3.86rem, 10.80vw, 4.63rem) !important;
    border-radius: calc(clamp(3.86rem, 10.80vw, 4.63rem) / 2) !important;
    /*width: clamp(88%, 93.5%, 99%) !important;*/
    max-width: 9.9rem !important;
    padding: 0 clamp(0.2rem, 1.2vw, 0.4rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Altura específica para botón de AYUDA ≤480px - 6% MÁS ALTO SOBRE LA NUEVA BASE */
  #ayudaButton button {
    height: clamp(4.09rem, 11.45vw, 4.91rem) !important;
    border-radius: calc(clamp(4.09rem, 11.45vw, 4.91rem) / 2) !important;
  }
  
  #spendCreditsButtons button svg {
    height: clamp(2.1rem, 7vw, 2.8rem) !important;
    width: clamp(2.1rem, 7vw, 2.8rem) !important;
  }
  
  #spendCreditsButtons .cost-credits {
    width: clamp(2.38rem, 7vw, 3.08rem) !important;
    height: clamp(2.38rem, 7vw, 3.08rem) !important;
    line-height: clamp(2.38rem, 7vw, 3.08rem) !important;
    font-size: clamp(1.12rem, 3.92vw, 1.54rem) !important;
    min-width: 2.38rem !important;
    max-width: 3.08rem !important;
  }
  
  /* Monedas específicas para AYUDA y RALENTIZAR en móviles - 10% MÁS GRANDES */
  #ayudaButton .cost-credits,
  #ralentizarButton .cost-credits {
    width: clamp(2.62rem, 7.7vw, 3.39rem) !important;
    height: clamp(2.62rem, 7.7vw, 3.39rem) !important;
    line-height: clamp(2.62rem, 7.7vw, 3.39rem) !important;
    font-size: clamp(1.23rem, 4.31vw, 1.69rem) !important;
    min-width: 2.62rem !important;
    max-width: 3.39rem !important;
  }
  
  #spendCreditsButtons p {
    font-size: clamp(1.001rem, 3.388vw, 1.309rem) !important;
    margin-top: clamp(0.14rem, 0.84vw, 0.28rem) !important;
  }
  
  #spendCreditsButtons #duplicarButton button #displayDuplicar {
    flex: 1 !important; /* Ocupa todo el espacio disponible */
    min-width: 0 !important; /* Permite que flex funcione correctamente */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }
  
  #spendCreditsButtons #duplicarButton button p {
    font-size: clamp(0.924rem, 3.08vw, 1.232rem) !important;
    line-height: clamp(1.078rem, 3.388vw, 1.386rem) !important;
  }
  
  #spendCreditsButtons #ayudaIcons {
    width: clamp(66%, 77%, 88%) !important;
    max-width: 6.6rem !important; /* Espacio para dos iconos lado a lado en móviles + 10% */
    justify-content: flex-start !important; /* Alinear iconos a la izquierda */
    gap: clamp(0.2rem, 0.15vw, 0.22rem) !important; /* Gap muy pequeño - casi tocándose */
  }
  
  /* AJUSTES DE BOTÓN AYUDA EXPANDIDO - MÓVILES + 10% ANCHO */
  #ayudaButton {
    width: clamp(44%, 49.5%, 55%) !important;
    min-width: 7.7rem !important;
    max-width: 11rem !important;
  }
  
  #ayudaButton button {
    min-width: 7.7rem !important;
    padding: 0 clamp(0.3rem, 1.5vw, 0.6rem) !important;
    justify-content: flex-start !important; /* Alinear contenido a la izquierda */
  }
  
  #ralentizarButton, #duplicarButton {
    min-width: 4.4rem !important;
    max-width: 7.15rem !important;
  }
  
  #ralentizarButton button, #duplicarButton button {
    min-width: 4.4rem !important;
    max-width: 7.15rem !important;
  }
  
  /* ICONOS ESPECÍFICOS AGRANDADOS 30% ADICIONAL - MÓVILES - REDUCIDO 6% */
  #ralentizarButton button svg {
    height: clamp(2.57rem, 8.55vw, 3.42rem) !important;
    width: clamp(2.57rem, 8.55vw, 3.42rem) !important;
  }
  
  #ayudaButton button {
    overflow: visible !important;
  }
  
  #ayudaButton button svg#ayudaPrimera,
  #ayudaButton button svg#ayudaSegunda {
    height: clamp(2.57rem, 8.55vw, 3.42rem) !important;
    width: clamp(2.57rem, 8.55vw, 3.42rem) !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 400px) {
  /* Reducir aún más para dispositivos muy pequeños */
  #qyaContainer .question h2,
  #qyaContainer .question span h2,
  #qyaContainer .question span h2.line-compact,
  #qyaContainer .question span h2.line-compact.mar-sides.center-ver {
    font-size: clamp(1.1rem, 4.5vw, 1.65rem) !important;
    line-height: 1.2 !important;
    font-style: normal !important;
  }
  
  /* BOTONES DE CRÉDITOS EXTRA PEQUEÑOS PARA PANTALLAS <= 400px + 4% ALTURA + 6% ALTURA */
  #spendCreditsButtons {
    height: 11.42vh !important; /* Aumentado para compensar padding-top */
    height: 11.42svh !important;
    min-height: 5.02rem !important; /* Aumentado para compensar padding-top */
    max-height: 7.64rem !important; /* Aumentado para compensar padding-top */
    padding: clamp(0.7rem, 1.8vh, 1.1rem) 0 0.25rem !important; /* Más padding-top para 400px */
  }
  
  #spendCreditsButtons button {
    height: clamp(3.39rem, 10.03vw, 4.32rem) !important;
    border-radius: calc(clamp(3.39rem, 10.03vw, 4.32rem) / 2) !important;
    width: clamp(82.5%, 88%, 93.5%) !important;
    max-width: 6.05rem !important;
    padding: 0 clamp(0.15rem, 1vw, 0.3rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Altura específica para botón de AYUDA ≤400px - 6% MÁS ALTO SOBRE LA NUEVA BASE */
  #ayudaButton button {
    height: clamp(3.59rem, 10.63vw, 4.58rem) !important;
    border-radius: calc(clamp(3.59rem, 10.63vw, 4.58rem) / 2) !important;
  }
  
  #spendCreditsButtons button svg {
    height: clamp(1.89rem, 6.55vw, 2.62rem) !important;
    width: clamp(1.89rem, 6.55vw, 2.62rem) !important;
  }
  
  #spendCreditsButtons .cost-credits {
    width: clamp(2.18rem, 6.55vw, 2.91rem) !important;
    height: clamp(2.18rem, 6.55vw, 2.91rem) !important;
    line-height: clamp(2.18rem, 6.55vw, 2.91rem) !important;
    font-size: clamp(1.02rem, 3.64vw, 1.46rem) !important;
    min-width: 2.18rem !important;
    max-width: 2.91rem !important;
  }
  
  /* Monedas específicas para AYUDA y RALENTIZAR ≤400px - 10% MÁS GRANDES */
  #ayudaButton .cost-credits,
  #ralentizarButton .cost-credits {
    width: clamp(2.40rem, 7.21vw, 3.20rem) !important;
    height: clamp(2.40rem, 7.21vw, 3.20rem) !important;
    line-height: clamp(2.40rem, 7.21vw, 3.20rem) !important;
    font-size: clamp(1.12rem, 4.00vw, 1.61rem) !important;
    min-width: 2.40rem !important;
    max-width: 3.20rem !important;
  }
  
  #spendCreditsButtons p {
    font-size: clamp(0.957rem, 3.201vw, 1.276rem) !important;
    margin-top: clamp(0.11rem, 0.73vw, 0.22rem) !important;
  }
  
  #spendCreditsButtons #duplicarButton button #displayDuplicar {
    flex: 1 !important; /* Ocupa todo el espacio disponible */
    min-width: 0 !important; /* Permite que flex funcione correctamente */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }
  
  #spendCreditsButtons #duplicarButton button p {
    font-size: clamp(0.8rem, 2.772vw, 1.155rem) !important;
    line-height: clamp(1.001rem, 3.08vw, 1.309rem) !important;
  }
  
  #spendCreditsButtons #ayudaIcons {
    width: clamp(60.5%, 71.5%, 82.5%) !important;
    max-width: 6.05rem !important; /* Espacio para dos iconos lado a lado - ≤400px + 10% */
    justify-content: flex-start !important; /* Alinear iconos a la izquierda */
    gap: clamp(0.135rem, 0.13vw, 0.3rem) !important; /* Gap muy pequeño - casi tocándose */
  }
  
  /* AJUSTES DE BOTÓN AYUDA EXPANDIDO - ≤400px + 10% ANCHO */
  #ayudaButton {
    width: clamp(41.8%, 47.3%, 52.8%) !important;
    min-width: 7.15rem !important;
    max-width: 8.9rem !important;
  }
  
  #ayudaButton button {
    min-width: 8.5rem !important;
    padding: 0 clamp(0.25rem, 1.3vw, 0.5rem) !important;
    justify-content: flex-start !important; /* Alinear contenido a la izquierda */
  }
  
  #ralentizarButton, #duplicarButton {
    min-width: 3.85rem !important;
    max-width: 7.6rem !important;
  }
  
  #ralentizarButton button, #duplicarButton button {
    min-width: 3.85rem !important;
    max-width: 7.6rem !important;
  }
  
  /* ICONOS ESPECÍFICOS AGRANDADOS 30% ADICIONAL - ≤400px - REDUCIDO 6% */
  #ralentizarButton button svg {
    height: clamp(2.23rem, 7.70vw, 3.08rem) !important;
    width: clamp(2.23rem, 7.70vw, 3.08rem) !important;
  }
  
  #ayudaButton button {
    overflow: visible !important;
  }
  
  #ayudaButton button svg#ayudaPrimera,
  #ayudaButton button svg#ayudaSegunda {
    height: clamp(2.23rem, 7.70vw, 3.08rem) !important;
    width: clamp(2.23rem, 7.70vw, 3.08rem) !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 370px) {
  /* Para dispositivos como 360px de ancho (pantalla del usuario) */
  #qyaContainer .question h2,
  #qyaContainer .question span h2,
  #qyaContainer .question span h2.line-compact,
  #qyaContainer .question span h2.line-compact.mar-sides.center-ver {
    font-size: clamp(1.05rem, 4.5vw, 1.55rem) !important;
    line-height: 1.15 !important;
    font-style: normal !important;
    margin: 0.05em 0 !important;
  }
  
  /* BOTONES DE CRÉDITOS ULTRA PEQUEÑOS PARA PANTALLAS <= 370px + 4% ALTURA + 6% ALTURA */
  #spendCreditsButtons {
    height: 10.87vh !important; /* Aumentado para compensar padding-top */
    height: 10.87svh !important;
    min-height: 4.46rem !important; /* Aumentado para compensar padding-top */
    max-height: 7.17rem !important; /* Aumentado para compensar padding-top */
    padding: clamp(0.6rem, 1.5vh, 1rem) 0 0.2rem !important; /* Más padding-top en pantallas pequeñas */
  }
  
  #spendCreditsButtons button {
    height: clamp(3.08rem, 9.26vw, 4.02rem) !important;
    border-radius: calc(clamp(3.08rem, 9.26vw, 4.02rem) / 2) !important;
    width: clamp(77%, 82.5%, 88%) !important;
    max-width: 5.5rem !important;
    padding: 0 clamp(0.1rem, 0.8vw, 0.25rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Altura específica para botón de AYUDA ≤370px - 6% MÁS ALTO SOBRE LA NUEVA BASE */
  #ayudaButton button {
    height: clamp(3.26rem, 9.82vw, 4.26rem) !important;
    border-radius: calc(clamp(3.26rem, 9.82vw, 4.26rem) / 2) !important;
  }
  
  #spendCreditsButtons button svg {
    height: clamp(1.68rem, 5.88vw, 2.24rem) !important;
    width: clamp(1.68rem, 5.88vw, 2.24rem) !important;
  }
  
  #spendCreditsButtons .cost-credits {
    width: clamp(1.82rem, 5.88vw, 2.52rem) !important;
    height: clamp(1.82rem, 5.88vw, 2.52rem) !important;
    line-height: clamp(1.82rem, 5.88vw, 2.52rem) !important;
    font-size: clamp(0.91rem, 3.22vw, 1.26rem) !important;
    min-width: 1.82rem !important;
    max-width: 2.52rem !important;
  }
  
  /* Monedas específicas para AYUDA y RALENTIZAR ≤370px - 10% MÁS GRANDES */
  #ayudaButton .cost-credits,
  #ralentizarButton .cost-credits {
    width: clamp(2.00rem, 6.47vw, 2.77rem) !important;
    height: clamp(2.00rem, 6.47vw, 2.77rem) !important;
    line-height: clamp(2.00rem, 6.47vw, 2.77rem) !important;
    font-size: clamp(1.00rem, 3.54vw, 1.39rem) !important;
    min-width: 2.00rem !important;
    max-width: 2.77rem !important;
  }
  
  #spendCreditsButtons p {
    font-size: clamp(0.847rem, 2.772vw, 1.155rem) !important;
    margin-top: clamp(0.07rem, 0.56vw, 0.175rem) !important;
  }
  
  #spendCreditsButtons #duplicarButton button #displayDuplicar {
    flex: 1 !important; /* Ocupa todo el espacio disponible */
    min-width: 0 !important; /* Permite que flex funcione correctamente */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
  }
  
  #spendCreditsButtons #duplicarButton button p {
    font-size: clamp(0.73rem, 2.563vw, 1.122rem) !important;
    line-height: clamp(0.957rem, 2.882vw, 1.276rem) !important;
  }
  
  #spendCreditsButtons #ayudaIcons {
    width: clamp(55%, 66%, 77%) !important;
    max-width: 5.5rem !important; /* Espacio para dos iconos lado a lado - ≤370px + 10% */
    justify-content: flex-start !important; /* Alinear iconos a la izquierda */
    gap: clamp(0.13rem, 0.12vw, 0.28rem) !important; /* Gap muy pequeño - casi tocándose */
  }
  
  /* AJUSTES DE BOTÓN AYUDA EXPANDIDO - ≤370px (pantalla del usuario) + 10% ANCHO */
  #ayudaButton {
    width: clamp(39.6%, 45.1%, 50.6%) !important;
    min-width: 6.6rem !important;
    max-width: 7.35rem !important;
  }
  
  #ayudaButton button {
    min-width: 7.6rem !important;
    padding: 0 clamp(0.2rem, 1.1vw, 0.4rem) !important;
    justify-content: flex-start !important; /* Alinear contenido a la izquierda */
  }
  
  #ralentizarButton, #duplicarButton {
    min-width: 3.52rem !important;
    max-width: 6.8rem !important;
  }
  
  #ralentizarButton button, #duplicarButton button {
    min-width: 3.52rem !important;
    max-width: 6.8rem !important;
  }
  
  /* ICONOS ESPECÍFICOS AGRANDADOS 30% ADICIONAL - ≤370px - REDUCIDO 6% */
  #ralentizarButton button svg {
    height: clamp(2.05rem, 7.18vw, 2.74rem) !important;
    width: clamp(2.05rem, 7.18vw, 2.74rem) !important;
  }
  
  #ayudaButton button {
    overflow: visible !important;
  }
  
  #ayudaButton button svg#ayudaPrimera,
  #ayudaButton button svg#ayudaSegunda {
    height: clamp(2.05rem, 7.18vw, 2.74rem) !important;
    width: clamp(2.05rem, 7.18vw, 2.74rem) !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 350px) {
  /* Para dispositivos extremadamente pequeños */
  #qyaContainer .question h2,
  #qyaContainer .question span h2,
  #qyaContainer .question span h2.line-compact,
  #qyaContainer .question span h2.line-compact.mar-sides.center-ver {
    font-size: clamp(1.0rem, 4.5vw, 1.5rem) !important;
    line-height: 1.1 !important;
    font-style: normal !important;
    margin: 0.05em 0 !important;
  }
  
  /* ICONOS ESPECÍFICOS AGRANDADOS 30% ADICIONAL - ≤350px - REDUCIDO 6% */
  #ralentizarButton button svg {
    height: clamp(1.91rem, 6.64vw, 2.57rem) !important;
    width: clamp(1.91rem, 6.64vw, 2.57rem) !important;
  }
  
  #ayudaButton button {
    overflow: visible !important;
  }
  
  #ayudaButton button svg#ayudaPrimera,
  #ayudaButton button svg#ayudaSegunda {
    height: clamp(1.91rem, 6.64vw, 2.57rem) !important;
    width: clamp(1.91rem, 6.64vw, 2.57rem) !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================= */
/* == OPTIMIZACIONES PARA PANTALLAS MENORES A 750PX == */
/* ============================================= */

/* Reducir el font-size de la pregunta para pantallas menores a 750px + AUMENTO 25% */
@media (max-height: 750px) {
  /* REDUCIR TAMAÑO DE LA PREGUNTA PERO AUMENTADO 25% PARA MEJOR LEGIBILIDAD Y LIMITAR A 2 LÍNEAS */
  #qyaContainer .question h2,
  #qyaContainer .question span h2,
  #qyaContainer .question span h2.line-compact,
  #qyaContainer .question span h2.line-compact.mar-sides.center-ver {
    font-size: clamp(1.05rem, 3.5vw, 1.52rem) !important; /* Aumentado 25% para mejor legibilidad */
    line-height: 1.2 !important; /* Más compacto */
    -webkit-line-clamp: 3 !important; /* 2 líneas para pantallas pequeñas */
  }
  
  /* AJUSTAR ALTURA DEL CONTENEDOR DE LA PREGUNTA PARA 2 LÍNEAS */
  #qyaContainer .question {
    min-height: 3.3rem !important; /* Reducir altura mínima para 2 líneas */
    max-height: 4.5rem !important; /* Reducir altura máxima para 2 líneas */
  }
  
  /* REDUCIR TIPOGRAFÍA DEL TIMER-TEXT 20% PARA PANTALLAS PEQUEÑAS */
  .timer-text,
  .timer-text > span {
    font-size: clamp(0.832rem, 2.08vw, 1.04rem) !important; /* 20% más pequeño */
  }
}

/* ANULAR PADDING-TOP DE .CONTENT PARA GANAR ESPACIO VERTICAL */
.content {
  padding-top: 0 !important;
}

/* AUMENTAR TIPOGRAFÍA DENTRO DE TABS MAR-SIDES 15% */
.tabs.mar-sides .gral-menu-btn,
.tabs.mar-sides .q-number-btn,
.tabs.mar-sides .tab,
.tabs.mar-sides button,
.tabs.mar-sides a {
  font-size: clamp(1.0925rem, 2.76vw, 1.61rem) !important; /* 15% más grande */
}

/* Ajustes responsive para elementos de alto viewport */
@media (max-height: 600px) {
  .progress {
    height: clamp(1.1rem, 2.2vh, 1.6rem);
    font-size: clamp(0.75rem, 2vw, 1.1rem);
  }
  
  .progress-text {
    font-size: clamp(0.9rem, 2.4vw, 1.32rem);
    padding: 0 clamp(0.5rem, 1.3vw, 1rem);
  }
  
  /* REDUCIR BOTONES DE RESPUESTA 20% PARA PANTALLAS ≤600px ALTURA */
  #qyaContainer .answer {
    min-height: clamp(1.152rem, 4.8vh, 2.88rem) !important;
    max-height: clamp(1.152rem, 4.8vh, 2.88rem) !important;
  }
  
  /* REDUCIR FONT-SIZE DE RESPUESTAS 20% PARA PANTALLAS ≤600px ALTURA */
  #qyaContainer .answer .answer-text,
  #qyaContainer .answers .answer .answer-text,
  #answerButtons .answer .answer-text,
  #answerButtons button .answer-text,
  .answer .answer-text,
  button.answer,
  button[class*="answer"],
  button[onclick*="answer"],
  .answer button,
  .answer,
  #answerButtons button,
  #answerButtons .answer {
    font-size: clamp(0.92477rem, 2.92032vw, 1.16813rem) !important;
  }
  
  #qyaContainer .answer .answer-count,
  #qyaContainer .answers .answer .answer-count,
  #answerButtons .answer .answer-count,
  #answerButtons button .answer-count,
  .answer .answer-count {
    font-size: clamp(0.73008rem, 2.14157vw, 0.97344rem) !important;
  }
}

/* CRITICAL: Ajustes para pantallas MUY PEQUEÑAS en altura - GARANTIZAR VISIBILIDAD COMPLETA */
@media (max-height: 550px) {
  /* REDUCIR PADDING DE QUESTION A CERO PARA OPTIMIZAR ESPACIO VERTICAL */
  #qyaContainer .question {
    padding: 0 !important;
  }

  #qyaContainer .question {
    min-height: 1.8rem !important;
  }
  
  /* Reducir botones de créditos para pantallas muy bajas */
  #spendCreditsButtons {
    height: 9.2vh !important; /* Aumentado para compensar padding-top */
    height: 9.2svh !important;
    min-height: 4.0rem !important; /* Aumentado para compensar padding-top */
    max-height: 5.8rem !important; /* Aumentado para compensar padding-top */
    padding: clamp(0.5rem, 1.2vh, 0.8rem) 0 0.2rem !important; /* Padding-top reducido pero presente */
  }
  
  #spendCreditsButtons button {
    height: clamp(2.8rem, 7.5vw, 3.5rem) !important;
    border-radius: calc(clamp(2.8rem, 7.5vw, 3.5rem) / 2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Altura específica para botón de AYUDA en pantallas muy bajas */
  #ayudaButton button {
    height: clamp(2.97rem, 7.95vw, 3.71rem) !important; /* +6% sobre base */
    border-radius: calc(clamp(2.97rem, 7.95vw, 3.71rem) / 2) !important;
  }
  
  /* Reducir SVG icons para pantallas muy bajas */
  #spendCreditsButtons button svg {
    height: clamp(1.5rem, 5vw, 2rem) !important;
    width: clamp(1.5rem, 5vw, 2rem) !important;
  }
  
  /* Iconos especiales más pequeños para pantallas muy bajas */
  #ralentizarButton button svg,
  #ayudaButton button svg#ayudaPrimera,
  #ayudaButton button svg#ayudaSegunda {
    height: clamp(1.8rem, 6vw, 2.4rem) !important;
    width: clamp(1.8rem, 6vw, 2.4rem) !important;
  }
  
  /* Monedas más pequeñas para pantallas muy bajas */
  #spendCreditsButtons .cost-credits {
    width: clamp(1.6rem, 5vw, 2.2rem) !important;
    height: clamp(1.6rem, 5vw, 2.2rem) !important;
    line-height: clamp(1.6rem, 5vw, 2.2rem) !important;
    font-size: clamp(0.8rem, 2.8vw, 1.1rem) !important;
    min-width: 1.6rem !important;
    max-width: 2.2rem !important;
  }
  
  /* Monedas específicas para AYUDA y RALENTIZAR en pantallas muy bajas */
  #ayudaButton .cost-credits,
  #ralentizarButton .cost-credits {
    width: clamp(1.76rem, 5.5vw, 2.42rem) !important;
    height: clamp(1.76rem, 5.5vw, 2.42rem) !important;
    line-height: clamp(1.76rem, 5.5vw, 2.42rem) !important;
    font-size: clamp(0.88rem, 3.08vw, 1.21rem) !important;
    min-width: 1.76rem !important;
    max-width: 2.42rem !important;
  }
  
  /* Textos más pequeños pero SIEMPRE VISIBLES */
  #spendCreditsButtons p {
    font-size: clamp(0.7rem, 2.5vw, 0.9rem) !important;
    margin-top: clamp(0.05rem, 0.4vw, 0.1rem) !important;
    line-height: 1.1 !important;
  }
  
  /* Textos del botón duplicar más pequeños */
  #spendCreditsButtons #duplicarButton button p {
    font-size: clamp(0.65rem, 2.2vw, 0.85rem) !important;
    line-height: clamp(0.75rem, 2.5vw, 0.95rem) !important;
  }
}

/* ULTRA CRITICAL: Para pantallas extremadamente pequeñas */
@media (max-height: 500px) {
  /* REDUCIR FONT-SIZE DE LA PREGUNTA 10% PARA PANTALLAS ≤500px ALTURA */
  #qyaContainer .question h2,
  #qyaContainer .question span h2,
  #qyaContainer .question span h2.line-compact,
  #qyaContainer .question span h2.line-compact.mar-sides.center-ver {
    font-size: clamp(0.855rem, 2.61vw, 1.188rem) !important; /* 10% más pequeño que 750px */
  }
  
  /* Botones ultra compactos pero manteniendo textos visibles */
  #spendCreditsButtons {
    height: 7.9vh !important; /* Aumentado para compensar padding-top */
    height: 7.9svh !important;
    min-height: 3.4rem !important; /* Aumentado para compensar padding-top */
    max-height: 5.1rem !important; /* Aumentado para compensar padding-top */
    padding: clamp(0.3rem, 0.8vh, 0.6rem) 0 0.1rem !important; /* Padding-top mínimo pero presente */
  }
  
  #spendCreditsButtons button {
    height: clamp(2.4rem, 6.5vw, 3rem) !important;
    border-radius: calc(clamp(2.4rem, 6.5vw, 3rem) / 2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Altura específica para botón de AYUDA en pantallas ultra bajas */
  #ayudaButton button {
    height: clamp(2.54rem, 6.89vw, 3.18rem) !important; /* +6% sobre base */
    border-radius: calc(clamp(2.54rem, 6.89vw, 3.18rem) / 2) !important;
  }
  
  /* SVG ultra pequeños */
  #spendCreditsButtons button svg {
    height: clamp(1.2rem, 4vw, 1.6rem) !important;
    width: clamp(1.2rem, 4vw, 1.6rem) !important;
  }
  
  /* Iconos especiales ultra pequeños */
  #ralentizarButton button svg,
  #ayudaButton button svg#ayudaPrimera,
  #ayudaButton button svg#ayudaSegunda {
    height: clamp(1.5rem, 5vw, 2rem) !important;
    width: clamp(1.5rem, 5vw, 2rem) !important;
  }
  
  /* Monedas ultra pequeñas */
  #spendCreditsButtons .cost-credits {
    width: clamp(1.3rem, 4.5vw, 1.8rem) !important;
    height: clamp(1.3rem, 4.5vw, 1.8rem) !important;
    line-height: clamp(1.3rem, 4.5vw, 1.8rem) !important;
    font-size: clamp(0.65rem, 2.5vw, 0.9rem) !important;
    min-width: 1.3rem !important;
    max-width: 1.8rem !important;
  }
  
  /* Monedas específicas para AYUDA y RALENTIZAR ultra pequeñas */
  #ayudaButton .cost-credits,
  #ralentizarButton .cost-credits {
    width: clamp(1.43rem, 4.95vw, 1.98rem) !important;
    height: clamp(1.43rem, 4.95vw, 1.98rem) !important;
    line-height: clamp(1.43rem, 4.95vw, 1.98rem) !important;
    font-size: clamp(0.72rem, 2.75vw, 0.99rem) !important;
    min-width: 1.43rem !important;
    max-width: 1.98rem !important;
  }
  
  /* Textos ultra pequeños pero GARANTIZANDO VISIBILIDAD */
  #spendCreditsButtons p {
    font-size: clamp(0.6rem, 2.2vw, 0.8rem) !important;
    margin-top: clamp(0.03rem, 0.3vw, 0.08rem) !important;
    line-height: 1.05 !important;
  }
  
  /* Textos del botón duplicar ultra pequeños */
  #spendCreditsButtons #duplicarButton button p {
    font-size: clamp(0.55rem, 2vw, 0.75rem) !important;
    line-height: clamp(0.65rem, 2.2vw, 0.85rem) !important;
  }
}

/* ============================================= */
/* == EFECTOS HOVER PARA SOLAPAS == */
/* ============================================= */

/* EFECTOS HOVER PARA SOLAPAS */
#mainMenu .gral-menu-btn:hover:not(.active) {
  transform: translateY(-1px) !important;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25) !important;
}

#questionTabs .gral-menu-btn:hover:not(.active):not(:disabled),
#questionTabs .q-number-btn:hover:not(.active):not(:disabled),
#questionTabs .tab:hover:not(.active):not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2) !important;
}

#posicionesContainer .tabs .gral-menu-btn:hover:not(.active),
#posicionesContainer .tabs .tab-ranking:hover:not(.active) {
  transform: translateY(-1px) !important;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================= */
/* == REGLA BÁSICA PARA CONTENEDOR-LISTA == */
/* ============================================= */

/* REGLA GENERAL PARA CONTENEDOR-LISTA - APLICAR EN TODAS LAS PANTALLAS */
.contenedor-lista {
  height: 75% !important;
}

/* ============================================= */
/* == NORMALIZAR Y REDUCIR TIPOGRAFÍAS TRIVIA PREMIO HEADER == */
/* ============================================= */

/* ESTABLECER VALORES BASE CORRECTOS PARA TODAS LAS PANTALLAS */
/* TÍTULO DEL PREMIO - Establecer valor base de 1rem */
#triviaPremioHeader #premioHeader #premioName h1,
#triviaPremioHeader #premioHeader #premioName h1.line-compact {
  font-size: 1rem !important;
}

/* OVERRIDE cualquier regla que pueda estar aplicando 1.1rem o 1.75rem */
#triviaPremioHeader div div h1 {
  font-size: 1rem !important;
}

/* REDUCIR 10% TODAS LAS TIPOGRAFÍAS EN TRIVIA PREMIO HEADER PARA PANTALLAS MENORES A 600px ALTURA */
@media (max-height: 600px) {
  /* ETIQUETAS "JUEGO" Y "PREMIO" - .tit-suave específicos (0.75rem * 0.9 = 0.675rem) */
  #triviaPremioHeader #triviaHeader #triviaName .tit-suave,
  #triviaPremioHeader #premioHeader #premioName .tit-suave {
    font-size: 0.675rem !important;
  }
  
  /* TÍTULO DEL PREMIO - h1 específico (1rem * 0.9 = 0.9rem) */
  #triviaPremioHeader #premioHeader #premioName h1,
  #triviaPremioHeader #premioHeader #premioName h1.line-compact {
    font-size: 0.9rem !important;
  }
  
  /* NOMBRE DE LA TRIVIA - h4 específico (1rem * 0.9 = 0.9rem) */
  #triviaPremioHeader #triviaHeader #triviaName h4,
  #triviaPremioHeader #triviaHeader #triviaName h4.font-light,
  #triviaPremioHeader #triviaHeader #triviaName h4.line-compact {
    font-size: 0.9rem !important;
  }
  
  /* DETALLE DEL PREMIO - h5 específico (0.8rem * 0.9 = 0.72rem) */
  #triviaPremioHeader #premioHeader #premioName h5,
  #triviaPremioHeader #premioHeader #premioName h5.line-compact,
  #triviaPremioHeader #premioHeader #premioName h5.font-light {
    font-size: 0.72rem !important;
  }
  
  /* NOMBRE DEL HOST - #hostName específico (0.75rem * 0.9 = 0.675rem) */
  #triviaPremioHeader #triviaHeader #triviaHostInfo #hostName {
    font-size: 0.675rem !important;
  }
  
  /* OVERRIDE REGLAS GENÉRICAS PARA ASEGURAR ESPECIFICIDAD EN PANTALLAS ≤600px */
  /* Todas las h1 dentro de triviaPremioHeader */
  #triviaPremioHeader div div h1 {
    font-size: 0.9rem !important; /* 1rem * 0.9 */
  }
  
  /* Todas las h4 dentro de triviaPremioHeader */
  #triviaPremioHeader div div h4 {
    font-size: 0.9rem !important; /* 1rem * 0.9 */
  }
  
  /* Todas las h5 dentro de triviaPremioHeader */
  #triviaPremioHeader div div h5 {
    font-size: 0.72rem !important; /* 0.8rem * 0.9 */
  }
  
  /* Todas las .tit-suave dentro de triviaPremioHeader */
  #triviaPremioHeader div div .tit-suave {
    font-size: 0.675rem !important; /* 0.75rem * 0.9 */
  }
  
  /* Todos los #hostName dentro de triviaPremioHeader */
  #triviaPremioHeader div div #hostName {
    font-size: 0.675rem !important; /* 0.75rem * 0.9 */
  }
}

/* ============================================= */
/* == REDUCIR AVATAR DEL HOST PARA PANTALLAS PEQUEÑAS == */
/* ============================================= */

/* REDUCIR 15% EL TAMAÑO DEL AVATAR DEL HOST PARA PANTALLAS MENORES A 650px ALTURA */
@media (max-height: 650px) {
  /* AVATAR DEL HOST - Reducir 15% (3.5rem * 0.85 = 2.975rem) */
  #triviaPremioHeader #triviaHostInfo .pic-circular,
  #triviaPremioHeader #triviaHostInfo .pic-circular-host {
    height: 2.975rem !important;
    width: 2.975rem !important;
    min-width: 2.975rem !important;
  }
  
  /* OVERRIDE para asegurar especificidad máxima */
  #triviaPremioHeader #triviaHeader #triviaHostInfo .pic-circular,
  #triviaPremioHeader #triviaHeader #triviaHostInfo .pic-circular-host {
    height: 2.975rem !important;
    width: 2.975rem !important;
    min-width: 2.975rem !important;
  }
}

/* REDUCIR OTRO 15% ADICIONAL PARA PANTALLAS MENORES A 500px ALTURA */
@media (max-height: 500px) {
  /* AVATAR DEL HOST - Reducir otro 15% (2.975rem * 0.85 = 2.52875rem) */
  #triviaPremioHeader #triviaHostInfo .pic-circular,
  #triviaPremioHeader #triviaHostInfo .pic-circular-host {
    height: 2.52875rem !important;
    width: 2.52875rem !important;
    min-width: 2.52875rem !important;
  }
  
  /* OVERRIDE para asegurar especificidad máxima */
  #triviaPremioHeader #triviaHeader #triviaHostInfo .pic-circular,
  #triviaPremioHeader #triviaHeader #triviaHostInfo .pic-circular-host {
    height: 2.52875rem !important;
    width: 2.52875rem !important;
    min-width: 2.52875rem !important;
  }
}

/* ============================================= */
/* == REDUCIR PESTAÑAS PRINCIPALES PARA PANTALLAS PEQUEÑAS == */
/* ============================================= */

/* REDUCIR 20% EL ALTO Y LA TIPOGRAFÍA DE PREGUNTA Y POSICIONES PARA PANTALLAS MENORES A 500px ALTURA */
@media (max-height: 500px) {
  /* BOTONES ESPECÍFICOS: preguntaButton y posicionesButton - REDUCIR 20% */
  #preguntaButton,
  #posicionesButton {
    /* Altura reducida 20% de clamp(2.4rem, 5.2vh, 3.8rem) */
    min-height: clamp(1.92rem, 4.16vh, 3.04rem) !important;
    
    /* Tipografía reducida 20% de clamp(1.2075rem, 3.105vw, 1.725rem) */
    font-size: clamp(0.966rem, 2.484vw, 1.38rem) !important;
    
    /* Ajustar padding proporcionalmente */
    padding: clamp(0.4rem, 0.88vh, 0.72rem) clamp(0.72rem, 1.76vw, 1.28rem) !important;
  }
  
  /* ASEGURAR QUE valoracionButton NO SEA AFECTADO - mantener valores originales */
  #valoracionButton {
    /* Mantener altura original */
    min-height: clamp(2.4rem, 5.2vh, 3.8rem) !important;
    
    /* Mantener tipografía original */
    font-size: clamp(1.2075rem, 3.105vw, 1.725rem) !important;
    
    /* Mantener padding original */
    padding: clamp(0.5rem, 1.1vh, 0.9rem) clamp(0.9rem, 2.2vw, 1.6rem) !important;
  }
}

/* ULTRA CRITICAL: Para pantallas extremadamente pequeñas */
@media (max-height: 500px) {
  /* REDUCIR FONT-SIZE DE LA PREGUNTA 10% PARA PANTALLAS ≤500px ALTURA */
  #qyaContainer .question h2,
  #qyaContainer .question span h2,
  #qyaContainer .question span h2.line-compact,
  #qyaContainer .question span h2.line-compact.mar-sides.center-ver {
    font-size: clamp(0.855rem, 2.61vw, 1.188rem) !important; /* 10% más pequeño que 750px */
  }
  
  /* Botones ultra compactos pero manteniendo textos visibles */
  #spendCreditsButtons {
    height: 7.9vh !important; /* Aumentado para compensar padding-top */
    height: 7.9svh !important;
    min-height: 3.4rem !important; /* Aumentado para compensar padding-top */
    max-height: 5.1rem !important; /* Aumentado para compensar padding-top */
    padding: clamp(0.3rem, 0.8vh, 0.6rem) 0 0.1rem !important; /* Padding-top mínimo pero presente */
  }
  
  #spendCreditsButtons button {
    height: clamp(2.4rem, 6.5vw, 3rem) !important;
    border-radius: calc(clamp(2.4rem, 6.5vw, 3rem) / 2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Altura específica para botón de AYUDA en pantallas ultra bajas */
  #ayudaButton button {
    height: clamp(2.54rem, 6.89vw, 3.18rem) !important; /* +6% sobre base */
    border-radius: calc(clamp(2.54rem, 6.89vw, 3.18rem) / 2) !important;
  }
  
  /* SVG ultra pequeños */
  #spendCreditsButtons button svg {
    height: clamp(1.2rem, 4vw, 1.6rem) !important;
    width: clamp(1.2rem, 4vw, 1.6rem) !important;
  }
  
  /* Iconos especiales ultra pequeños */
  #ralentizarButton button svg,
  #ayudaButton button svg#ayudaPrimera,
  #ayudaButton button svg#ayudaSegunda {
    height: clamp(1.5rem, 5vw, 2rem) !important;
    width: clamp(1.5rem, 5vw, 2rem) !important;
  }
  
  /* Monedas ultra pequeñas */
  #spendCreditsButtons .cost-credits {
    width: clamp(1.3rem, 4.5vw, 1.8rem) !important;
    height: clamp(1.3rem, 4.5vw, 1.8rem) !important;
    line-height: clamp(1.3rem, 4.5vw, 1.8rem) !important;
    font-size: clamp(0.65rem, 2.5vw, 0.9rem) !important;
    min-width: 1.3rem !important;
    max-width: 1.8rem !important;
  }
  
  /* Monedas específicas para AYUDA y RALENTIZAR ultra pequeñas */
  #ayudaButton .cost-credits,
  #ralentizarButton .cost-credits {
    width: clamp(1.43rem, 4.95vw, 1.98rem) !important;
    height: clamp(1.43rem, 4.95vw, 1.98rem) !important;
    line-height: clamp(1.43rem, 4.95vw, 1.98rem) !important;
    font-size: clamp(0.72rem, 2.75vw, 0.99rem) !important;
    min-width: 1.43rem !important;
    max-width: 1.98rem !important;
  }
  
  /* Textos ultra pequeños pero GARANTIZANDO VISIBILIDAD */
  #spendCreditsButtons p {
    font-size: clamp(0.6rem, 2.2vw, 0.8rem) !important;
    margin-top: clamp(0.03rem, 0.3vw, 0.08rem) !important;
    line-height: 1.05 !important;
  }
  
  /* Textos del botón duplicar ultra pequeños */
  #spendCreditsButtons #duplicarButton button p {
    font-size: clamp(0.55rem, 2vw, 0.75rem) !important;
    line-height: clamp(0.65rem, 2.2vw, 0.85rem) !important;
  }
}

/* CRITICAL: Ajustes para pantallas menores a 470px - REDUCIR FONT-SIZE DE PREGUNTA 12% */
@media (max-height: 470px) {
  /* REDUCIR FONT-SIZE DE LA PREGUNTA 12% PARA PANTALLAS ≤470px ALTURA */
  #qyaContainer .question h2,
  #qyaContainer .question span h2,
  #qyaContainer .question span h2.line-compact,
  #qyaContainer .question span h2.line-compact.mar-sides.center-ver {
    font-size: clamp(0.78rem, 2.4vw, 1.1rem) !important; /* 12% más pequeño que 750px */
  }
}