/* 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;
}

/* ✅ FINISHED TRIVIA: Permitir 4 líneas de texto en trivias finalizadas */
#qyaContainer .question h2.finished-trivia-question,
#qyaContainer .question span h2.finished-trivia-question,
#qyaContainer .question span h2.line-compact.finished-trivia-question,
#qyaContainer .question span h2.line-compact.mar-sides.center-ver.finished-trivia-question {
  -webkit-line-clamp: 4 !important;
  line-clamp: 4 !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;
  }
  
  /* ✅ FINISHED TRIVIA: 4 líneas en media query 480px */
  #qyaContainer .question h2.finished-trivia-question,
  #qyaContainer .question span h2.finished-trivia-question {
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !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; /* 3 líneas para pantallas pequeñas */
  }
  
  /* ✅ FINISHED TRIVIA: 4 líneas en media query 750px */
  #qyaContainer .question h2.finished-trivia-question,
  #qyaContainer .question span h2.finished-trivia-question {
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
  }
  
  /* 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 */
  }
}

/* ========================================== */
/* POPUP DE 1 MINUTO PARA COMPRAR CRÉDITOS   */
/* ========================================== */

/* Botón X arriba a la derecha */
.popup-msg1mbuy .close-button-top-right {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: transform 0.2s ease;
}

.popup-msg1mbuy .close-button-top-right:hover {
  transform: scale(1.1);
}

.popup-msg1mbuy .close-button-top-right svg {
  width: 24px;
  height: 24px;
  fill: #999;
  transition: fill 0.2s ease;
}

.popup-msg1mbuy .close-button-top-right:hover svg {
  fill: #333;
}

/* Título centrado */
.popup-msg1mbuy .popup-title-centered {
  width: 100%;
  text-align: center;
  margin-bottom: 0.5rem;
}

.popup-msg1mbuy .popup-title-centered h1 {
  margin: 0;
  padding: 0;
}

.popup-msg1mbuy .popup-timer-large {
  font-size: 4rem;
  font-weight: 900;
  color: #a354e3;
  margin: 1.5rem 0;
  text-shadow: 0 2px 8px rgba(163,84,227,0.2);
  transition: color 0.3s ease, transform 0.3s ease;
  display: block;
  text-align: center;
}

/* Animación de pulso urgente para el timer */
@keyframes timerPulseUrgent {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Contenedor del Pack de 10 Créditos */
.pack-10-container {
  margin: 1.5rem 0;
  padding: 1rem;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border: 2px solid rgba(163,84,227,0.2);
}

.pack-product {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  justify-content: center !important;
  flex-direction: row !important;
}

.pack-image {
  width: 120px !important;
  height: 120px !important;
  min-width: 120px !important;
  min-height: 120px !important;
  flex-shrink: 0 !important;
  background: white !important;
  border-radius: 12px !important;
  padding: 0.2rem !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.pack-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.pack-info {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pack-info h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
}

.pack-info .pack-price {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
  color: #a354e3;
}

/* Botón "Ver Otros Paquetes" */
.pack-other-btn {
  background: transparent;
  color: #a354e3;
  border: 2px solid #a354e3;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  margin-top: 0.2rem;
}

.pack-other-btn:hover {
  background: #a354e3;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(163,84,227,0.3);
}

.pack-other-btn:active {
  transform: translateY(0);
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
  .popup-msg1mbuy .popup-timer-large {
    font-size: 3.5rem;
    margin: 1rem 0;
  }
  
  .pack-10-container {
    margin: 1rem 0;
    padding: 0.6rem;
  }
  
  .pack-image {
    width: 80px !important;
    height: 80px !important;
    padding: 0.2rem !important;
  }
  
  .pack-info h3 {
    font-size: 1rem;
  }
  
  .pack-info .pack-price {
    font-size: 1.2rem;
  }
  
  .pack-other-btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
}

@media (max-height: 600px) {
  .popup-msg1mbuy .popup-timer-large {
    font-size: 3rem;
    margin: 0.8rem 0;
  }
  
  .pack-10-container {
    margin: 0.8rem 0;
    padding: 0.4rem;
  }
  
  .pack-image {
    width: 70px !important;
    height: 70px !important;
    padding: 0.15rem !important;
  }
  
  .pack-info h3 {
    font-size: 0.9rem;
  }
  
  .pack-info .pack-price {
    font-size: 1.1rem;
  }
  
  .pack-other-btn {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
}

/* Estilo para el botón de comprar dentro del popup */
.popup-msg1mbuy .popup-buttons button {
  background: linear-gradient(90deg, #ff7f00 0%, #a354e3 100%);
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(163,84,227,0.2);
}

.popup-msg1mbuy .popup-buttons button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(163,84,227,0.3);
}

.popup-msg1mbuy .popup-buttons button:active {
  transform: translateY(0);
}

/* ============================================= */
/* == VISTA DESKTOP: SIMULACIÓN DE MÓVIL == */
/* ============================================= */

/* Estilos para vista desktop que simula un teléfono móvil centrado */
@media (min-width: 769px) {
  body.desktop-view {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
  }

  body.desktop-view #showFirst {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
  }

  body.desktop-view #triviaViewer {
    width: 412px !important;
    min-width: 412px !important;
    max-width: 412px !important;
    height: 915px !important;
    min-height: 915px !important;
    max-height: 95vh !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    border-radius: 40px;
    box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.45),
      0 0 0 3px rgba(30, 30, 30, 0.9),
      0 0 0 4px rgba(255, 255, 255, 0.08);
    overflow: hidden;
    background: #ffffff;
    z-index: 100;
  }

  body.desktop-view #triviaViewer::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: #000000;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
    z-index: 9998;
    pointer-events: none;
  }

  body.desktop-view header {
    background: var(--col-pri);
    padding: 0.65rem 1rem 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-top: none;
    min-height: 4rem !important;
    max-height: 5rem !important;
  }

  body.desktop-view #userHeader {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  body.desktop-view #userHeader > * {
    padding: 0;
  }

  body.desktop-view #logoInfo,
  body.desktop-view #userInfo,
  body.desktop-view #userCredits,
  body.desktop-view #userBuyCredits,
  body.desktop-view #userMenu {
    display: flex;
    align-items: center;
  }

  body.desktop-view #userInfo .name-circular p {
    font-size: 0.75rem !important;
    line-height: 1.05;
  }

  body.desktop-view #userCreditsRemaining h3 {
    font-size: 1.4rem !important;
  }

  body.desktop-view #userCreditsRemaining p {
    font-size: 0.7rem !important;
  }

  body.desktop-view #userBuyCredits button {
    transform: scale(0.92);
  }

  body.desktop-view #userMenu a#menuToggle .line {
    height: 3px;
    margin: 4px 0;
  }

  body.desktop-view .footer-player {
    display: none;
  }

  body.desktop-view #content-wrapper {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.desktop-view .popup-overlay,
  body.desktop-view #countdown {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  @media (min-width: 1600px) {
    body.desktop-view #triviaViewer {
      width: 412px !important;
      min-width: 412px !important;
      max-width: 412px !important;
      height: 915px !important;
      min-height: 915px !important;
    }
  }

  @media (max-height: 980px) {
    body.desktop-view #triviaViewer {
      height: 92vh !important;
      max-height: 92vh !important;
      width: auto !important;
      max-width: 412px !important;
      aspect-ratio: 412 / 915 !important;
    }
  }

  @media (max-height: 840px) {
    body.desktop-view #triviaViewer {
      height: 90vh !important;
      border-radius: 32px;
    }
  }

  body.desktop-view #triviaPremioHeader {
    padding: 0.75rem 1rem 0.6rem;
    gap: 0.75rem;
  }

  body.desktop-view #triviaPremioHeader .tit-suave {
    font-size: 0.75rem !important;
    letter-spacing: 0.05rem !important;
  }

  body.desktop-view #triviaPremioHeader #triviaName h4,
  body.desktop-view #triviaPremioHeader #triviaName h4.font-light,
  body.desktop-view #triviaPremioHeader #triviaName h4.line-compact {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
  }

  body.desktop-view #triviaPremioHeader #premioName h1,
  body.desktop-view #triviaPremioHeader #premioName h1.line-compact {
    font-size: 1.1rem !important;
  }

  body.desktop-view #triviaPremioHeader #premioName h5,
  body.desktop-view #triviaPremioHeader #premioName h5.line-compact,
  body.desktop-view #triviaPremioHeader #premioName h5.font-light {
    font-size: 0.8rem !important;
  }

  body.desktop-view #triviaPremioHeader #triviaHostInfo #hostName {
    font-size: 0.8rem !important;
  }

  body.desktop-view #triviaPremioHeader .pic-circular {
    width: 3.2rem !important;
    height: 3.2rem !important;
  }

  body.desktop-view #mainMenu {
    gap: 0.3rem;
  }

  body.desktop-view #mainMenu .gral-menu-btn {
    min-height: 3rem !important;
    font-size: 1.05rem !important;
    padding: 0.55rem 0.9rem !important;
    letter-spacing: 0.03rem !important;
  }

  body.desktop-view #questionTabs .gral-menu-btn,
  body.desktop-view #questionTabs .q-number-btn,
  body.desktop-view #questionTabs .tab {
    min-height: 2.4rem !important;
    min-width: 3.2rem !important;
    font-size: 1rem !important;
    padding: 0.45rem 0.65rem !important;
  }

  body.desktop-view .progress {
    height: 1.6rem !important;
  }

  body.desktop-view .progress-text {
    font-size: 0.85rem !important;
  }

  body.desktop-view #qyaContainer .question {
    min-height: 5rem !important;
    padding: 0.4rem 0 !important;
  }

  body.desktop-view #qyaContainer .question h2,
  body.desktop-view #qyaContainer .question span h2,
  body.desktop-view #qyaContainer .question span h2.line-compact,
  body.desktop-view #qyaContainer .question span h2.line-compact.mar-sides.center-ver {
    font-size: 1.35rem !important;
    line-height: 1.28 !important;
    line-clamp: 3;
    -webkit-line-clamp: 3 !important;
  }
  
  /* ✅ FINISHED TRIVIA: 4 líneas en desktop view */
  body.desktop-view #qyaContainer .question h2.finished-trivia-question,
  body.desktop-view #qyaContainer .question span h2.finished-trivia-question,
  body.desktop-view #qyaContainer .question span h2.line-compact.finished-trivia-question,
  body.desktop-view #qyaContainer .question span h2.line-compact.mar-sides.center-ver.finished-trivia-question {
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
  }

  body.desktop-view .timer-text,
  body.desktop-view .timer-text > span {
    font-size: 1.05rem !important;
  }

  body.desktop-view #qyaContainer .answer {
    min-height: 3.2rem !important;
    max-height: 3.4rem !important;
    padding: 0.35rem 0.9rem !important;
  }

  body.desktop-view #qyaContainer .answer .answer-text {
    font-size: 1.15rem !important;
  }

  body.desktop-view #qyaContainer .answer .answer-count {
    font-size: 0.95rem !important;
  }

  body.desktop-view #spendCreditsButtons {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.3rem, 1vw, 0.6rem) !important;
    padding: clamp(0.4rem, 1vh, 0.6rem) clamp(0.45rem, 1.8vw, 0.9rem) clamp(0.25rem, 0.8vh, 0.4rem) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    text-align: center;
  }

  body.desktop-view #spendCreditsButtons > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 0 !important;
  }

  body.desktop-view #spendCreditsButtons button {
    width: 100% !important;
    height: clamp(3.1rem, 9vw, 4.1rem) !important;
    border-radius: calc(clamp(3.1rem, 9vw, 4.1rem) / 2) !important;
    padding: 0 clamp(0.35rem, 1.2vw, 0.55rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  body.desktop-view #spendCreditsButtons button svg,
  body.desktop-view #spendCreditsButtons #ayudaIcons svg {
    width: clamp(1.9rem, 6vw, 2.6rem) !important;
    height: clamp(1.9rem, 6vw, 2.6rem) !important;
  }

  body.desktop-view #spendCreditsButtons #ayudaIcons {
    display: flex !important;
    gap: clamp(0.2rem, 0.6vw, 0.35rem) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.desktop-view #spendCreditsButtons .cost-credits {
    width: clamp(2rem, 6.5vw, 2.6rem) !important;
    height: clamp(2rem, 6.5vw, 2.6rem) !important;
    line-height: clamp(2rem, 6.5vw, 2.6rem) !important;
    font-size: clamp(0.9rem, 2.6vw, 1.1rem) !important;
    margin-left: auto !important;
  }

  body.desktop-view #spendCreditsButtons p {
    font-size: clamp(0.85rem, 2.6vw, 1.05rem) !important;
    margin-top: clamp(0.08rem, 0.5vw, 0.18rem) !important;
    line-height: 1.05 !important;
  }

  body.desktop-view #displayDuplicar {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    text-align: center !important;
    gap: clamp(0.03rem, 0.15vw, 0.08rem) !important;
    padding: clamp(0.04rem, 0.16vw, 0.1rem) 0 !important;
  }

  body.desktop-view #displayDuplicar p {
    font-size: clamp(0.75rem, 2.3vw, 0.95rem) !important;
    line-height: clamp(0.88rem, 2.5vw, 1.1rem) !important;
    margin: 0 !important;
  }

  body.desktop-view #displayDuplicar p:last-child {
    font-size: clamp(0.68rem, 2vw, 0.85rem) !important;
    line-height: clamp(0.8rem, 2.2vw, 1rem) !important;
  }

  body.desktop-view #displayDuplicar #svgContainer {
    overflow: visible !important;
    height: clamp(0.35rem, 0.9vw, 0.55rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  body.desktop-view #displayDuplicar #svgContainer svg {
    transform: scale(0.85) !important;
    width: clamp(0.7rem, 1.6vw, 0.95rem) !important;
    height: clamp(0.7rem, 1.6vw, 0.95rem) !important;
  }

  body.desktop-view #displayDuplicar .scale-120 {
    font-size: clamp(0.7rem, 1.8vw, 0.95rem) !important;
    line-height: clamp(0.82rem, 2.1vw, 1.18rem) !important;
  }

  body.desktop-view #displayDuplicar .scale-80,
  body.desktop-view #displayDuplicar #txtAbajo {
    font-size: clamp(0.42rem, 1.1vw, 1.1rem) !important;
    line-height: clamp(0.52rem, 1.32vw, 0.74rem) !important;
  }
}