/* ===== GENERAL ===== */

:root {
  color-scheme: only light;
  background-color: #07162a;
  color: #ffffff;
  accent-color: #2c7cc4;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  color-scheme: only light;
  background-color: #07162a;
  color: #ffffff;
  min-height: 100%;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  color-scheme: only light;
}

input,
select,
textarea {
  background-color: #ffffff;
  color: #07162a;
}

button {
  color: #ffffff;
}

body::before {
  content: "";
  position: fixed;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: url("estadi.jpg") center/cover no-repeat;
  animation: kenburns 20s ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes kenburns {
  0%   { transform: scale(1)    translateX(0%)   translateY(0%); }
  25%  { transform: scale(1.08) translateX(-2%)  translateY(-1%); }
  50%  { transform: scale(1.05) translateX(2%)   translateY(-2%); }
  75%  { transform: scale(1.1)  translateX(-1%)  translateY(1%); }
  100% { transform: scale(1.06) translateX(1%)   translateY(2%); }
}

.container {
  min-height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.hidden {
  display: none !important;
}

.audio-toggle-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 12000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(5, 18, 34, 0.78);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.audio-toggle-btn:hover {
  background: rgba(20, 70, 116, 0.88);
  transform: translateY(-1px);
}

.audio-toggle-btn:active {
  transform: translateY(0);
}


/* ===== PANTALLA INICIO ===== */

#inicio-screen {
  height: auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px 20px;
  gap: 0;
  background: rgba(0, 0, 0, 0.55);
  text-align: center;
  flex: none;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}

#game-logo {
  height: 140px;
  width: auto;
  margin: 0;
  display: block;
}

.intro-title {
  font-size: 26px;
  margin: 0 0 4px 0;
  line-height: 1.05;
  max-width: 320px;
}

.intro-text {
  max-width: 320px;
  font-size: 14px;
  opacity: 0.82;
  margin: 0 0 18px 0;
  line-height: 1.3;
}

#inicio-screen input {
  width: 100%;
  max-width: 280px;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-size: 16px;
  margin: 10px 0;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  box-sizing: border-box;
}

#inicio-screen #lang-selector {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap;
}

#inicio-screen #lang-selector .lang-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  min-width: 50px;
  min-height: 0;
  height: auto !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700;
  border-radius: 20px !important;
  border: 1px solid #ccc !important;
  background: #fff !important;
  color: #22313f !important;
  cursor: pointer;
  box-shadow: none !important;
  opacity: 1;
}

#inicio-screen #lang-selector .lang-btn:hover {
  transform: none !important;
  box-shadow: none !important;
  background: #f3f6f9 !important;
}

#inicio-screen #lang-selector .lang-btn:active {
  transform: none !important;
}

#auth-current-user {
  font-size: 12px;
  font-weight: 700;
}

#inicio-screen button {
  width: 100%;
  max-width: 280px;
  padding: 16px;
  margin: 8px 0;
  font-size: 20px;
  font-weight: bold;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  background: linear-gradient(#8fd3ff, #2c7cc4);
  color: white;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(44, 124, 196, 0.3);
}

#inicio-screen button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(44, 124, 196, 0.45);
}

#inicio-screen button:active {
  transform: scale(0.96);
}


/* ===== BARRA SUPERIOR ===== */

#barra-superior {
  position: fixed;
  top: 12px;
  left: 50%;
  width: min(calc(100% - 28px), 760px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 10px 14px;
  z-index: 1000;
  border: 1px solid rgba(82, 185, 255, 0.48);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(7, 28, 48, 0.84), rgba(2, 9, 20, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 42px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(37, 157, 255, 0.12);
  transform: translateX(-50%);
  backdrop-filter: blur(15px);
  box-sizing: border-box;
}

.barra-izquierda {
  background: transparent;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}

.barra-derecha {
  background: transparent;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  box-sizing: border-box;
}

.jugador-nombre {
  font-size: 20px;
  font-weight: bold;
}

.player-info {
  background: rgba(0,0,0,0.4);
  padding: 8px 12px;
  border-radius: 12px;
}

.player-name {
  display: block;
}

.nivel-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-top: 4px;
}

.nivel-label {
  font-size: 12px;
  font-weight: 700;
}

.nivel-bar {
  width: 80px;
  height: 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
  overflow: hidden;
}

.nivel-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  transition: width 0.3s ease;
}

.nivel-percent {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.9;
}

.auth-nivel-wrap .nivel-bar {
  width: 72px;
}

.nivel-texto,
.puntos-nivel {
  font-size: 14px;
  opacity: 0.9;
}

.vidas-extra-badge {
  font-size: 0.75rem;
  background: #f0a500;
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 4px;
  font-weight: bold;
  vertical-align: middle;
}

.vidas-info {
  font-size: 14px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

#exit-game-btn {
  font-size: 12px;
  padding: 6px 12px;
  background: linear-gradient(135deg, #2c7cc4, #1e66a3);
  color: white;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(44,124,196,0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

#exit-game-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(44,124,196,0.4);
}


/* ===== PANTALLA QUIZ ===== */

#quiz-screen {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 108px 14px 28px;
  box-sizing: border-box;
}

#game-panel {
  width: min(100%, 700px);
  max-width: 700px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(80, 184, 255, 0.52);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 181, 255, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(6, 27, 47, 0.88), rgba(1, 8, 18, 0.88));
  color: #f4fbff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 26px 62px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(37, 157, 255, 0.13);
  backdrop-filter: blur(16px);
  box-sizing: border-box;
}


/* ===== PREGUNTA ===== */

#question-container {
  margin: 0 0 18px;
  padding: 18px clamp(16px, 3vw, 26px) 20px;
  border: 1px solid rgba(80, 184, 255, 0.24);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(4, 19, 35, 0.64), rgba(1, 8, 18, 0.36));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: left;
}

#question {
  padding: 0;
  color: rgba(248, 252, 255, 0.98);
  font-size: clamp(20px, 2.8vw, 27px);
  font-weight: 850;
  line-height: 1.34;
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.48);
}


/* ===== IMAGEN DE PREGUNTA (NO TOCAR) ===== */

#question-image-wrap {
  margin: 12px auto 8px auto;
  width: 100%;
  max-width: 260px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: imgFadeIn 0.4s ease;
}

@keyframes imgFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

#question-image {
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: opacity 0.3s ease;
}

#question-image.loading {
  opacity: 0;
}


/* ===== RESPUESTAS ===== */

#answers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 0;
}

.answer-btn {
  min-height: clamp(82px, 12vw, 106px);
  padding: 18px 16px;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 15px;
  box-sizing: border-box;
}

.answer-btn:nth-child(1) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 240, 244, 0.96));
  color: #111820;
  border: 1.5px solid rgba(84, 170, 225, 0.82);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.26);
}

.answer-btn:nth-child(2) {
  background:
    radial-gradient(circle at 50% 0%, rgba(88, 194, 255, 0.28), transparent 46%),
    linear-gradient(180deg, #0874df, #0349ad);
  color: white;
  border: 1.5px solid rgba(112, 205, 255, 0.78);
  box-shadow: 0 9px 22px rgba(0, 58, 139, 0.32), 0 0 16px rgba(41, 169, 255, 0.14);
}

.answer-btn:nth-child(3) {
  background:
    radial-gradient(circle at 50% 0%, rgba(88, 194, 255, 0.28), transparent 46%),
    linear-gradient(180deg, #0874df, #0349ad);
  color: white;
  border: 1.5px solid rgba(112, 205, 255, 0.78);
  box-shadow: 0 9px 22px rgba(0, 58, 139, 0.32), 0 0 16px rgba(41, 169, 255, 0.14);
}

.answer-btn:nth-child(4) {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 240, 244, 0.96));
  color: #111820;
  border: 1.5px solid rgba(84, 170, 225, 0.82);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.26);
}

.answer-btn:hover:not(:disabled) {
  transform: scale(1.03);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.answer-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.answer-btn.correct {
  background: #d4edda !important;
  color: #1a6b30 !important;
  border-color: #28a745 !important;
  animation: flashCorrect 0.3s ease;
}

.answer-btn.wrong {
  background: #f8d7da !important;
  color: #8b0000 !important;
  border-color: #dc3545 !important;
  animation: flashWrong 0.3s ease;
}

@keyframes flashCorrect {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes flashWrong {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-5px); }
  75%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}


/* ===== COMODINES ===== */

#controls {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

#comodin-saltar,
#comodin-5050 {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 20px;
  background: #2c7cc4;
  color: white;
  border: none;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}

#comodin-saltar:hover,
#comodin-5050:hover {
  background: #1e66a3;
}

#comodin-saltar:active,
#comodin-5050:active {
  transform: scale(0.96);
}


/* ===== BOTÓN SIGUIENTE ===== */

#next-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  background: #2c7cc4;
  color: white;
  border: none;
  border-radius: 10px;
  margin-top: 20px;
  cursor: pointer;
  transition: transform 0.12s;
}

#next-btn:active {
  transform: scale(0.97);
}


/* ===== TEMPORIZADOR ===== */

#timer-bar-wrap {
  position: fixed;
  left: 50%;
  top: 10px;
  bottom: auto;
  width: 74px;
  height: 74px;
  padding: 4px;
  border-radius: 50%;
  z-index: 9999;
  background: conic-gradient(#38b8ff calc(var(--timer-pct, 1) * 1turn), rgba(111, 180, 226, 0.18) 0);
  transform: translateX(-50%);
  box-shadow: 0 0 20px rgba(47, 181, 255, 0.28), 0 12px 28px rgba(0, 0, 0, 0.36);
  box-sizing: border-box;
}

#timer-seconds-label {
  text-align: center;
  font-size: 21px;
  font-weight: 950;
  color: white;
  background: transparent;
  display: inline-block;
  padding: 0;
  border-radius: 0;
  position: absolute;
  top: 50%;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 0;
  min-width: 0;
  pointer-events: none;
}

#timer-bar {
  display: none;
  height: 14px;
  width: 100%;
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  transition: width 0.9s linear, background-color 0.5s;
}


/* ===== PANEL DE EXPLICACIÓN (NO TOCAR) ===== */

#explicacion-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.82);
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
}

#explicacion-panel {
  background: white;
  color: #222;
  border-radius: 20px;
  padding: 32px 28px 28px 28px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  text-align: center;
  animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

#explicacion-resultado {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}

#explicacion-resultado.correcto { color: #1a7a3c; }
#explicacion-resultado.incorrecto { color: #b91c1c; }

#explicacion-respuesta-correcta {
  margin: 10px 0 0 0;
  padding: 14px 18px;
  background: #eef6ff;
  border-radius: 12px;
  border-left: 4px solid #2c7cc4;
}

.exp-label-correcta {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #6b8aad;
  margin-bottom: 4px;
}

.exp-nombre-correcto {
  font-size: 22px;
  font-weight: 900;
  color: #2c7cc4;
  line-height: 1.2;
}

.exp-divider {
  border: none;
  border-top: 1px solid #e8e8e8;
  margin: 16px 0;
}

#explicacion-texto {
  font-size: 15px;
  line-height: 1.65;
  color: #444;
  text-align: left;
}

#explicacion-countdown {
  font-size: 13px;
  color: #aaa;
  margin: 16px 0 12px 0;
}

#explicacion-countdown span {
  font-weight: 700;
  color: #2c7cc4;
}

#explicacion-seguir {
  padding: 12px 36px;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, #2c7cc4, #1e66a3);
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(44, 124, 196, 0.35);
}

#explicacion-seguir:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(44, 124, 196, 0.45);
}

#explicacion-seguir:active {
  transform: scale(0.96);
}


/* ===== DIALOG CONTINUAR PARTIDA ===== */

#continuar-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.78);
  align-items: center;
  justify-content: center;
  z-index: 8888;
  padding: 20px;
  box-sizing: border-box;
}

#continuar-panel {
  background: white;
  color: #222;
  border-radius: 20px;
  padding: 32px 28px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  text-align: center;
  animation: popIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#continuar-icono {
  font-size: 48px;
  margin-bottom: 12px;
}

#continuar-titulo {
  font-size: 20px;
  font-weight: 800;
  color: #2c7cc4;
  margin-bottom: 10px;
}

#continuar-info {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 24px;
  padding: 12px;
  background: #f4f8ff;
  border-radius: 10px;
}

#continuar-botones {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

#continuar-btn {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, #2c7cc4, #1e66a3);
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  box-shadow: 0 4px 12px rgba(44, 124, 196, 0.3);
}

#continuar-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(44,124,196,0.4); }
#continuar-btn:active { transform: scale(0.96); }

#nueva-btn {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  background: white;
  color: #888;
  border: 2px solid #ddd;
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s;
}

#nueva-btn:hover { border-color: #aaa; transform: translateY(-1px); }
#nueva-btn:active { transform: scale(0.96); }


/* ===== ANUNCIOS ===== */

#ad-screen-round {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
}

/* Broadcast motion layer: light CSS-only transitions for gameplay UX. */
html body.gameplay-active::before,
body:has(#quiz-screen:not(.hidden))::before {
  transform-origin: center center !important;
  animation: stadiumDrift 24s ease-in-out infinite alternate !important;
  will-change: transform, background-position !important;
}

html body.gameplay-active.question-is-entering::before {
  filter: blur(1.2px) saturate(1.3) contrast(1.08) brightness(1.24) !important;
}

html body.gameplay-active #game-panel#game-panel {
  transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease !important;
}

html body.gameplay-active #game-panel.question-entering#game-panel {
  animation: gamePanelBroadcastIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

html body.gameplay-active #game-panel.question-entering #question-container,
html body.gameplay-active #game-panel.question-entering #answers-grid,
html body.gameplay-active #game-panel.question-entering #controls {
  animation: questionBroadcastIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

html body.gameplay-active #game-panel.question-entering #answers-grid {
  animation-delay: 45ms !important;
}

html body.gameplay-active #question-container#question-container,
html body.gameplay-active #answers-grid#answers-grid {
  will-change: transform, opacity !important;
}

html body.gameplay-active .answer-btn.answer-btn {
  transition:
    transform 150ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 220ms ease,
    filter 180ms ease !important;
}

html body.gameplay-active .answer-btn.answer-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.018) !important;
  filter: saturate(1.06) brightness(1.04) !important;
}

html body.gameplay-active .answer-btn.answer-btn:active:not(:disabled) {
  transform: scale(0.975) !important;
}

html body.gameplay-active .answer-btn.correct.answer-btn {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.75), transparent 44%),
    linear-gradient(180deg, #4cf08a, #0f8f44) !important;
  color: #052d16 !important;
  border-color: rgba(143, 255, 190, 0.98) !important;
  box-shadow:
    0 0 0 2px rgba(127, 255, 176, 0.34),
    0 0 26px rgba(51, 232, 123, 0.64),
    0 14px 26px rgba(0, 50, 20, 0.34) !important;
  animation: broadcastCorrect 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

html body.gameplay-active .answer-btn.wrong.answer-btn {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.62), transparent 42%),
    linear-gradient(180deg, #ff6f82, #b91f34) !important;
  color: #fff !important;
  border-color: rgba(255, 176, 188, 0.98) !important;
  box-shadow:
    0 0 0 2px rgba(255, 94, 117, 0.24),
    0 0 22px rgba(255, 74, 99, 0.54),
    0 14px 26px rgba(65, 0, 10, 0.32) !important;
  animation: broadcastWrong 360ms ease both !important;
}

#explicacion-screen {
  background:
    linear-gradient(180deg, rgba(0, 11, 25, 0.48), rgba(0, 5, 14, 0.84)),
    rgba(0, 0, 0, 0.68) !important;
  backdrop-filter: blur(7px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.12) !important;
  animation: modalFadeIn 180ms ease both !important;
}

#explicacion-panel {
  border-radius: 18px !important;
  border: 1px solid rgba(128, 214, 255, 0.42) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(234, 244, 255, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 26px 70px rgba(0, 12, 28, 0.48),
    0 0 34px rgba(69, 181, 255, 0.18) !important;
  animation: explanationBroadcastUp 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

#explicacion-panel::before {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: -14px auto 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff, #49bfff, #ffffff);
  opacity: 0.72;
}

#ad-screen-round {
  background:
    linear-gradient(180deg, rgba(1, 14, 31, 0.72), rgba(0, 5, 14, 0.92)),
    rgba(0, 0, 0, 0.76) !important;
  backdrop-filter: blur(8px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.16) !important;
  animation: modalFadeIn 220ms ease both !important;
}

#ad-screen-round:not(.hidden) > * {
  animation: adPanelIn 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

#ad-title,
.round-title {
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.broadcast-float {
  position: absolute;
  right: clamp(18px, 5vw, 42px);
  top: clamp(78px, 18%, 140px);
  z-index: 30;
  pointer-events: none;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: clamp(13px, 2.4vw, 18px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42);
  animation: broadcastFloatUp 1120ms ease-out forwards;
  will-change: transform, opacity;
}

.broadcast-float-points {
  background: linear-gradient(180deg, rgba(42, 180, 255, 0.96), rgba(0, 89, 190, 0.92));
  box-shadow: 0 0 20px rgba(67, 187, 255, 0.4);
}

.broadcast-float-xp {
  right: clamp(20px, 6vw, 56px);
  top: clamp(114px, 25%, 178px);
  background: linear-gradient(180deg, rgba(81, 236, 141, 0.98), rgba(10, 132, 65, 0.94));
  box-shadow: 0 0 20px rgba(55, 232, 128, 0.4);
  animation-delay: 90ms;
}

.round-transition-overlay,
.ad-break-bumper {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 12000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.round-transition-overlay {
  background:
    linear-gradient(90deg, rgba(0, 45, 104, 0.94), rgba(255, 255, 255, 0.2), rgba(0, 82, 176, 0.94)),
    url("estadi.jpg") center / cover no-repeat;
}

.round-transition-overlay::before,
.ad-break-bumper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 36%, rgba(255, 255, 255, 0.24) 42%, transparent 50%),
    linear-gradient(180deg, rgba(0, 10, 24, 0.18), rgba(0, 3, 12, 0.58));
  transform: translateX(-18%);
}

.round-transition-overlay.show,
.ad-break-bumper.show {
  visibility: visible;
  animation: bumperShow 900ms ease both;
}

.round-transition-overlay.show::before,
.ad-break-bumper.show::before {
  animation: broadcastWipe 840ms ease both;
}

.round-broadcast-card,
.ad-break-card {
  position: relative;
  min-width: min(78vw, 520px);
  padding: clamp(18px, 5vw, 34px) clamp(24px, 7vw, 48px);
  border: 1px solid rgba(174, 226, 255, 0.58);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(107, 206, 255, 0.28), transparent 52%),
    linear-gradient(180deg, rgba(5, 35, 72, 0.88), rgba(0, 12, 31, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 26px 70px rgba(0, 0, 0, 0.42),
    0 0 38px rgba(62, 184, 255, 0.24);
  color: white;
  text-align: center;
  text-transform: uppercase;
}

.round-broadcast-card span,
.ad-break-card span {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #96dbff;
}

.round-broadcast-card strong,
.ad-break-card strong {
  display: block;
  font-size: clamp(32px, 10vw, 72px);
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: 0;
  text-shadow: 0 5px 24px rgba(0, 0, 0, 0.46);
}

.ad-break-bumper {
  background:
    linear-gradient(90deg, rgba(0, 17, 40, 0.94), rgba(0, 74, 158, 0.9)),
    url("estadi.jpg") center / cover no-repeat;
}

.ad-break-card strong {
  font-size: clamp(24px, 6.2vw, 46px);
}

button,
.btn-principal,
.btn-secundario,
#close-ad,
#resultado-final-ranking-btn,
#resultado-final-inicio-btn {
  transition:
    transform 150ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    background 220ms ease !important;
}

button:hover,
.btn-principal:hover,
.btn-secundario:hover,
#close-ad:hover,
#resultado-final-ranking-btn:hover,
#resultado-final-inicio-btn:hover {
  filter: brightness(1.05) saturate(1.05) !important;
}

button:active,
.btn-principal:active,
.btn-secundario:active,
#close-ad:active,
#resultado-final-ranking-btn:active,
#resultado-final-inicio-btn:active {
  transform: scale(0.975) !important;
}

@keyframes stadiumDrift {
  from {
    background-position: 48% 48%;
    transform: scale(1.012);
  }
  to {
    background-position: 53% 49%;
    transform: scale(1.04);
  }
}

@keyframes gamePanelBroadcastIn {
  from {
    opacity: 0.84;
    transform: translateX(12px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes questionBroadcastIn {
  from {
    opacity: 0;
    transform: translateY(10px) translateX(10px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(0);
    filter: blur(0);
  }
}

@keyframes broadcastCorrect {
  0% { transform: scale(1); }
  48% { transform: scale(1.045); }
  100% { transform: scale(1.018); }
}

@keyframes broadcastWrong {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  42% { transform: translateX(4px); }
  64% { transform: translateX(-3px); }
  82% { transform: translateX(2px); }
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes explanationBroadcastUp {
  from {
    opacity: 0;
    transform: translateY(34px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes adPanelIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes broadcastFloatUp {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  18% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-42px) scale(1.04);
  }
}

@keyframes bumperShow {
  0% { opacity: 0; }
  16% { opacity: 1; }
  76% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes broadcastWipe {
  from { transform: translateX(-42%); }
  to { transform: translateX(42%); }
}

@media (max-width: 620px) {
  .broadcast-float {
    right: 18px;
    top: 92px;
    font-size: 13px;
  }

  .broadcast-float-xp {
    top: 126px;
  }

  .round-broadcast-card,
  .ad-break-card {
    width: calc(100vw - 40px);
    min-width: 0;
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.gameplay-active::before,
  body:has(#quiz-screen:not(.hidden))::before,
  html body.gameplay-active #game-panel.question-entering#game-panel,
  html body.gameplay-active #game-panel.question-entering #question-container,
  html body.gameplay-active #game-panel.question-entering #answers-grid,
  html body.gameplay-active #game-panel.question-entering #controls,
  html body.gameplay-active .answer-btn.correct.answer-btn,
  html body.gameplay-active .answer-btn.wrong.answer-btn,
  #explicacion-screen,
  #explicacion-panel,
  #ad-screen-round,
  #ad-screen-round:not(.hidden) > *,
  .broadcast-float,
  .round-transition-overlay.show,
  .ad-break-bumper.show,
  .round-transition-overlay.show::before,
  .ad-break-bumper.show::before {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

#ad-title { font-size: 24px; margin-bottom: 15px; }

#ad-image {
  max-width: 90%;
  max-height: 60vh;
  object-fit: contain;
  margin: 15px 0;
}

#ad-text {
  font-size: 16px;
  line-height: 1.5;
  margin: 15px 0;
  max-width: 500px;
  text-align: center;
}

#close-ad {
  margin-top: 20px;
  padding: 12px 24px;
  background: #2c7cc4;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.12s;
}

#close-ad:active { transform: scale(0.96); }


/* ===== RANKING ===== */

#ranking-screen,
#history-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  background: rgba(0, 0, 0, 0.6);
}

#ranking-list,
#history-list {
  width: 100%;
  max-width: 600px;
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

#ranking-list li {
  background: rgba(255, 255, 255, 0.12);
  padding: 9px 12px;
  margin: 7px 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  color: #fff;
}

#ranking-list li.ranking-top-1 {
  background: linear-gradient(135deg, rgba(255, 214, 92, 0.95), rgba(190, 131, 22, 0.92));
  color: #2a1a00;
  border-color: rgba(255, 232, 139, 0.9);
}

#ranking-list li.ranking-top-2 {
  background: linear-gradient(135deg, rgba(238, 242, 247, 0.94), rgba(176, 187, 201, 0.9));
  color: #1f2937;
  border-color: rgba(255, 255, 255, 0.78);
}

#ranking-list li.ranking-top-3 {
  background: linear-gradient(135deg, rgba(202, 128, 72, 0.94), rgba(123, 72, 41, 0.92));
  color: #f0fbff;
  border-color: rgba(232, 170, 116, 0.85);
}

#ranking-list li.ranking-current-user {
  border: 2px solid #41d1a6;
  box-shadow: 0 8px 18px rgba(65, 209, 166, 0.24);
  font-weight: 700;
}

.ranking-row-main,
.ranking-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ranking-row-main {
  margin-bottom: 3px;
}

.ranking-position {
  flex: 0 0 auto;
  font-weight: 800;
}

.ranking-name {
  flex: 1;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.ranking-row-meta {
  font-size: 13px;
  opacity: 0.9;
}

.ranking-next-gap {
  width: 100%;
  max-width: 600px;
  margin: 2px 0 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(65, 209, 166, 0.14);
  border: 1px solid rgba(65, 209, 166, 0.42);
  color: #eafff7;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.ranking-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.history-week-btn {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: rgba(255,255,255,0.08);
  color: white;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
  position: relative;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.history-week-btn:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.15);
}

.history-week-btn.current-week {
  border: 1px solid #41d1a6;
  background: rgba(65, 209, 166, 0.14);
}

.history-week-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 26px;
}

.titulo-semana {
  font-size: 16px;
  font-weight: 700;
}

.fecha-semana {
  font-size: 12px;
  opacity: 0.7;
}

.history-week-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  opacity: 0.78;
}

#ranking-screen button,
#history-screen button {
  padding: 7px 13px;
  margin: 0;
  font-size: 13px;
  background: #2c7cc4;
  color: white;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.14s, transform 0.12s;
}

#ranking-screen button:hover,
#history-screen button:hover { background: #256aa8; }

#ranking-screen button:active,
#history-screen button:active { transform: scale(0.96); }

#ads-stats-screen,
#question-stats-screen {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 30px 20px;
  background: rgba(0, 0, 0, 0.6);
}

#profile-screen {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 26px 20px 34px;
  background:
    linear-gradient(180deg, rgba(0, 12, 24, 0.9), rgba(0, 10, 20, 0.76)),
    url("estadi.jpg") center / cover no-repeat;
  box-sizing: border-box;
  color: rgba(246, 251, 255, 0.96);
  position: relative;
  overflow-x: hidden;
}

.profile-panel {
  width: 100%;
  max-width: 920px;
  position: relative;
  z-index: 1;
}

.top-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 0 0 30px;
}

.back-link {
  justify-self: start;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: rgba(230, 242, 255, 0.82);
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.back-link:hover,
.back-link:focus-visible {
  color: #fff;
}

.screen-title {
  margin: 0;
  text-align: center;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
}

.top-bar .screen-title {
  grid-column: 2;
}

#profile-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(18px, 4vw, 34px);
  min-height: 190px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(67, 162, 238, 0.5);
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 28%, rgba(0, 150, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(2, 24, 46, 0.92), rgba(2, 15, 31, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 28px rgba(33, 151, 255, 0.18),
    0 20px 44px rgba(0, 0, 0, 0.28);
}

#profile-header::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -32px;
  width: 190px;
  height: 190px;
  background: url("logo.png") center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}

.profile-user-summary {
  min-width: 0;
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 22px;
}

#profile-header strong,
#profile-header .profile-user-summary span {
  display: block;
}

#profile-header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.05;
  font-weight: 900;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}

.profile-level-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: rgba(221, 235, 250, 0.75);
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 800;
}

.profile-level-line .profile-level {
  color: #279cff;
  opacity: 1;
}

.profile-dot {
  color: rgba(95, 180, 255, 0.86);
}

.profile-xp-row {
  display: grid;
  grid-template-columns: minmax(120px, 260px) auto;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  color: rgba(226, 240, 255, 0.78);
  font-size: 15px;
  font-weight: 800;
}

.profile-xp-bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(151, 193, 222, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.profile-xp-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #078dff, #46c9ff);
  box-shadow: 0 0 16px rgba(52, 180, 255, 0.58);
}

#profile-header .logout-mini {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 16px;
  border-color: rgba(67, 162, 238, 0.5);
  background: rgba(4, 24, 44, 0.72);
  color: rgba(241, 248, 255, 0.9);
  font-size: 17px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 18px rgba(0, 136, 255, 0.14);
}

#profile-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 22px 0;
}

#profile-stats div,
.profile-list-item,
.profile-empty {
  border: 1px solid rgba(109, 180, 238, 0.34);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(18, 55, 88, 0.54), rgba(1, 17, 34, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
}

.profile-stat-card {
  display: grid !important;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 18px;
  min-height: 106px;
  padding: 18px 24px !important;
}

.profile-stat-icon {
  display: grid !important;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(35, 157, 255, 0.8);
  border-radius: 50%;
  background: rgba(0, 12, 28, 0.58);
  color: #f6fbff;
  font-size: 28px;
  box-shadow:
    inset 0 0 18px rgba(0, 136, 255, 0.18),
    0 0 18px rgba(0, 136, 255, 0.22);
}

#profile-stats strong,
#profile-stats span,
.profile-list-item strong,
.profile-list-item span {
  display: block;
}

#profile-stats strong {
  font-size: clamp(34px, 5vw, 46px);
  line-height: 0.95;
  font-weight: 900;
}

#profile-stats span,
.profile-list-item span {
  margin-top: 8px;
  font-size: clamp(16px, 2.8vw, 22px);
  color: rgba(224, 238, 255, 0.72);
}

#profile-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 24px 0;
}

#profile-tabs button {
  padding: 18px 14px;
  border: 1px solid rgba(109, 180, 238, 0.34);
  border-radius: 16px;
  background: rgba(1, 17, 34, 0.62);
  color: #fff;
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#profile-tabs button.active {
  border-color: rgba(52, 180, 255, 0.88);
  background: linear-gradient(135deg, rgba(0, 129, 238, 0.96), rgba(0, 86, 177, 0.86));
  box-shadow: 0 0 20px rgba(20, 146, 255, 0.28);
}

#profile-content {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(109, 180, 238, 0.34);
  border-radius: 18px;
  background: rgba(1, 17, 34, 0.48);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

#profile-content .profile-list-item {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#profile-content .profile-list-item + .profile-list-item {
  border-top: 1px solid rgba(109, 180, 238, 0.18);
}

.profile-game-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 96px;
  padding: 20px 28px;
}

.profile-row-icon {
  display: block !important;
  margin: 0 !important;
  font-size: 36px !important;
  line-height: 1;
  opacity: 1 !important;
}

.profile-row-main {
  min-width: 0;
}

.profile-row-main strong {
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.1;
  font-weight: 900;
}

.profile-row-main span {
  font-size: clamp(15px, 2.7vw, 20px);
}

.profile-row-arrow {
  margin: 0 !important;
  color: #229eff !important;
  font-size: 50px !important;
  line-height: 1;
  opacity: 1 !important;
}

.profile-empty {
  padding: 22px;
  text-align: center;
}

.profile-footer {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
  padding: 26px 34px;
  border: 1px solid rgba(35, 157, 255, 0.55);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 50%, rgba(0, 138, 255, 0.18), transparent 26%),
    linear-gradient(135deg, rgba(4, 32, 61, 0.9), rgba(1, 15, 31, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 24px rgba(0, 136, 255, 0.16);
}

.profile-footer-badge {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(103, 194, 255, 0.72);
  border-radius: 50%;
  color: #9ee4ff;
  font-size: 38px;
  box-shadow: 0 0 18px rgba(0, 136, 255, 0.28);
}

.profile-footer strong,
.profile-footer span {
  display: block;
}

.profile-footer strong {
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1;
  letter-spacing: 3px;
}

.profile-footer div span {
  margin-top: 14px;
  color: rgba(224, 238, 255, 0.7);
  font-size: clamp(14px, 2.6vw, 18px);
}

.profile-footer-heart {
  color: #189cff;
  font-size: 30px;
  text-shadow: 0 0 18px rgba(24, 156, 255, 0.5);
}

.profile-footer.profile-help-footer {
  display: grid;
  place-items: center;
  grid-template-columns: none;
  margin-top: 24px;
  min-height: 88px;
  padding: 18px 26px;
  border-radius: 18px;
  border: 1px solid rgba(157, 220, 255, 0.24);
  color: #f7fbff;
  font-size: clamp(19px, 3.5vw, 25px);
  font-weight: 1000;
  text-align: center;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: nowrap;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.22),
    0 0 20px rgba(54, 178, 255, 0.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.14), transparent 42%),
    radial-gradient(circle at 35% 50%, rgba(46, 166, 255, 0.16), transparent 46%),
    linear-gradient(180deg, rgba(2, 33, 72, 0.82), rgba(0, 12, 31, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 22px rgba(45, 163, 255, 0.16);
}

@media (max-width: 640px) {
  #profile-screen {
    padding: 18px 12px 24px;
  }

  .top-bar {
    margin-bottom: 22px;
  }

  #profile-header {
    min-height: 0;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 18px;
  }

  #profile-header .logout-mini {
    position: absolute;
    top: 12px;
    right: 12px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 0;
  }

  .profile-xp-row {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 16px;
  }

  #profile-stats {
    gap: 8px;
  }

  .profile-stat-card {
    grid-template-columns: 46px 1fr;
    gap: 10px;
    min-height: 82px;
    padding: 14px !important;
  }

  .profile-stat-icon {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }

  #profile-tabs button {
    padding: 14px 10px;
  }

  .profile-game-row {
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    min-height: 78px;
    padding: 16px;
  }

  .profile-row-icon {
    font-size: 28px !important;
  }

  .profile-row-arrow {
    font-size: 36px !important;
  }

  .profile-footer {
    grid-template-columns: 54px 1fr auto;
    gap: 14px;
    padding: 18px;
  }

  .profile-footer.profile-help-footer {
    grid-template-columns: none;
    min-height: 86px;
    padding: 18px 16px;
    font-size: clamp(17px, 4.5vw, 23px);
  }

  .profile-footer-badge {
    width: 50px;
    height: 50px;
    font-size: 28px;
  }
}

.ads-stats-panel {
  width: 100%;
  max-width: 760px;
  background: rgba(255, 255, 255, 0.94);
  color: #1f2937;
  border-radius: 16px;
  padding: 24px;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.ads-stats-title {
  margin: 0 0 6px 0;
  color: #1a3a5c;
  text-align: center;
}

.ads-stats-subtitle {
  margin: 0 0 20px 0;
  text-align: center;
  color: #51606f;
  font-size: 14px;
}

.ads-stats-section {
  margin-bottom: 22px;
}

.ads-stats-section-title {
  margin: 0 0 12px 0;
  color: #2c7cc4;
  font-size: 18px;
}

.ads-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.ads-summary-card {
  background: #eef6ff;
  border: 1px solid #cfe0f5;
  border-radius: 8px;
  padding: 14px;
}

.ads-summary-label {
  display: block;
  font-size: 12px;
  color: #617487;
  margin-bottom: 6px;
  text-transform: uppercase;
  font-weight: 700;
}

.ads-summary-value {
  font-size: 28px;
  color: #1d5f98;
}

.ads-stat-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ads-stat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin: 8px 0;
  background: #f7fafc;
  border: 1px solid #dde7f0;
  border-radius: 8px;
}

.ads-stat-main {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ads-stat-meta {
  font-size: 12px;
  color: #607080;
  background: #eaf1f7;
  border-radius: 999px;
  padding: 3px 8px;
}

.ads-stat-count {
  font-size: 22px;
  font-weight: 800;
  color: #2c7cc4;
  min-width: 44px;
  text-align: right;
}

.ads-stat-empty {
  background: #f7fafc;
  color: #617487;
  border: 1px dashed #c6d4e2;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.question-stats-table-wrap {
  overflow-x: auto;
}

.question-stats-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  overflow: hidden;
}

.question-stats-table th,
.question-stats-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5edf5;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

.question-stats-table td {
  color: #111 !important;
  background: #fff;
  padding: 10px;
  border-bottom: 1px solid #d0d7e2;
  font-size: 14px;
  vertical-align: top;
}

.question-stats-table tr {
  background: #fff;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.question-stats-table tbody tr:nth-child(even) {
  background: #f5f7fb;
}

.question-stats-table tbody tr:hover {
  background: #eef6ff;
  box-shadow: inset 3px 0 0 #2c7cc4;
}

.question-stat-question {
  min-width: 220px;
}

.question-stat-question--image {
  display: flex;
  align-items: center;
  gap: 10px;
}

.question-stat-thumb {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 10px;
  object-fit: cover;
  background: #dbe6f2;
  border: 1px solid rgba(44, 124, 196, 0.22);
  box-shadow: 0 6px 16px rgba(26, 58, 92, 0.14);
}

.question-stat-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.question-stat-text {
  color: #12263a;
  font-weight: 700;
  line-height: 1.25;
}

.question-stat-answer {
  color: #2c7cc4;
  font-weight: 800;
  line-height: 1.25;
}

.question-stats-table th {
  background: #eef6ff;
  color: #1a3a5c;
  font-weight: 800;
}

.question-stats-table td:nth-child(n+4),
.question-stats-table th:nth-child(n+4) {
  text-align: right;
  white-space: nowrap;
}

#ads-stats-back,
#question-stats-back {
  padding: 12px 20px;
  margin-top: 8px;
  font-size: 15px;
  background: #2c7cc4;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

.ads-stats-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ads-stats-logout {
  padding: 12px 20px;
  margin-top: 8px;
  font-size: 15px;
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  cursor: pointer;
}

#admin-login-screen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 20px;
  box-sizing: border-box;
}

#admin-login-panel {
  width: 100%;
  max-width: 360px;
  background: white;
  color: #1f2937;
  border-radius: 16px;
  padding: 24px;
  box-sizing: border-box;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

#admin-login-title {
  font-size: 22px;
  font-weight: 800;
  color: #1d5f98;
  margin-bottom: 14px;
  text-align: center;
}

#admin-login-panel input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
}

#admin-login-error {
  margin: 4px 0 10px 0;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
}

#admin-login-actions {
  display: flex;
  gap: 10px;
}

#admin-login-btn,
#admin-login-cancel {
  flex: 1;
  padding: 12px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-size: 15px;
}

#admin-login-btn {
  background: #2c7cc4;
  color: white;
}

#admin-login-cancel {
  background: #f3f4f6;
  color: #4b5563;
}


/* ===== BADGE CATEGORÍA ===== */

.categoria-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
  background: #e8f4fd;
  color: #2c7cc4;
  border: 1.5px solid #2c7cc4;
}

.cat-jugadores { background: #e8f4fd; color: #2c7cc4;  border-color: #2c7cc4; }
.cat-historia  { background: #e7f5ff; color: #0a7fe8;  border-color: #0a7fe8; }
.cat-partidos  { background: #e8f5e9; color: #2e7d32;  border-color: #2e7d32; }
.cat-club      { background: #f3e5f5; color: #6a1b9a;  border-color: #6a1b9a; }

/* ============================================================
   PUNTUACIÓN — feedback flotante
   ============================================================ */

#pts-feedback {
  position: absolute;
  top: 10px; right: 16px;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.3s, transform 0.3s;
}

.pts-feedback-hidden {
  opacity: 0;
  transform: translateY(0px);
}

.pts-feedback-show {
  opacity: 1;
  transform: translateY(-18px);
  animation: ptsPop 1.1s ease forwards;
}

@keyframes ptsPop {
  0%   { opacity: 0; transform: translateY(0) scale(0.7); }
  20%  { opacity: 1; transform: translateY(-20px) scale(1.15); }
  70%  { opacity: 1; transform: translateY(-28px) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.9); }
}

/* ============================================================
   RETOS — botón Desafiar
   ============================================================ */

.retos-divider {
  width: 100%; max-width: 280px;
  border-top: 1px solid rgba(255,255,255,0.25);
  margin: 8px 0 4px 0;
}

.btn-desafiar {
  background: linear-gradient(135deg, #007fe9, #004fa8) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(0, 132, 230, 0.35) !important;
}

.btn-desafiar:hover { filter: brightness(1.08); }

/* ============================================================
   RETOS — selector tipo
   ============================================================ */

#reto-tipo-screen {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 7777; padding: 20px; box-sizing: border-box;
}

#reto-tipo-panel {
  background: white; color: #222; border-radius: 20px;
  padding: 32px 28px 28px 28px; max-width: 380px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4); text-align: center;
  animation: popIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

#reto-tipo-botones {
  display: flex; gap: 14px; margin: 20px 0 16px 0;
}

.btn-tipo-reto {
  flex: 1; padding: 18px 10px; border-radius: 16px; border: 2px solid transparent;
  cursor: pointer; font-size: 15px; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.btn-tipo-reto small {
  font-size: 11px; font-weight: 500; opacity: 0.75;
}

.btn-tipo-icono { font-size: 32px; }

.btn-1v1 {
  background: linear-gradient(135deg, #eef6ff, #d0e8ff);
  border-color: #2c7cc4; color: #1a5a99;
}
.btn-1v1:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(44,124,196,0.3); }

.btn-grupo {
  background: linear-gradient(135deg, #f0fff4, #d0f0e0);
  border-color: #28a745; color: #1a6b30;
}
.btn-grupo:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(40,167,69,0.3); }

.btn-cancelar-tipo {
  padding: 12px 28px; font-size: 15px; font-weight: 700;
  background: white; color: #888; border: 2px solid #ddd;
  border-radius: 30px; cursor: pointer; transition: transform 0.12s;
}
.btn-cancelar-tipo:hover { border-color: #aaa; }
.btn-cancelar-tipo:active { transform: scale(0.96); }

/* ============================================================
   RETOS — notificaciones
   ============================================================ */

.retos-notif {
  background: rgba(255,193,7,0.2);
  border: 1.5px solid rgba(255,193,7,0.7);
  color: #ffe082;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
  animation: pulseNotif 2s ease-in-out infinite;
}

@keyframes pulseNotif {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* ============================================================
   RETOS — badge modo
   ============================================================ */

.reto-mode-badge {
  text-align: center;
  background: linear-gradient(135deg, #007fe9, #004fa8);
  color: white; padding: 6px 18px; border-radius: 20px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.5px;
  margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0, 132, 230, 0.3);
}

/* ============================================================
   RETOS — pantalla Mis Retos
   ============================================================ */

#retos-screen {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; padding: 30px 20px;
  background: rgba(0,0,0,0.6);
}

#retos-tabs { display: flex; gap: 10px; margin: 16px 0; }

.reto-tab {
  padding: 8px 24px; border-radius: 20px;
  border: 2px solid #2c7cc4; background: transparent;
  color: white; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background 0.15s;
}
.reto-tab.active { background: #2c7cc4; color: white; }

#retos-list { width: 100%; max-width: 600px; list-style: none; padding: 0; }

.reto-list-item {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; padding: 14px 16px; margin: 8px 0;
  display: flex; justify-content: space-between;
  align-items: center; gap: 10px; flex-wrap: wrap;
}
.reto-list-info { flex: 1; min-width: 0; }
.reto-list-codigo { font-size: 16px; font-weight: 900; color: #8fd3ff; letter-spacing: 1px; }
.reto-list-meta   { font-size: 12px; opacity: 0.75; margin-top: 2px; }

.reto-list-estado { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; display: inline-block; margin-top: 4px; }
.reto-estado-pendiente  { background: rgba(255,193,7,0.2);  color: #ffe082; border: 1px solid rgba(255,193,7,0.5); }
.reto-estado-completado { background: rgba(76,175,80,0.2);  color: #a5d6a7; border: 1px solid rgba(76,175,80,0.5); }
.reto-estado-expirado   { background: rgba(150,150,150,0.2); color: #bbb;   border: 1px solid rgba(150,150,150,0.5); }

.reto-tipo-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-left: 6px; }
.reto-tipo-1v1   { background: rgba(44,124,196,0.2); color: #8fd3ff; }
.reto-tipo-grupo { background: rgba(40,167,69,0.2); color: #a5d6a7; }

.reto-list-btn {
  padding: 8px 16px; font-size: 13px; font-weight: 700;
  border-radius: 20px; border: none; cursor: pointer;
  background: #2c7cc4; color: white; transition: transform 0.12s;
  white-space: nowrap;
}
.reto-list-btn:active { transform: scale(0.96); }
.reto-list-btn:hover  { background: #1e66a3; }

.reto-list-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.reto-list-btn.is-disabled,
.reto-list-btn:disabled {
  cursor: not-allowed;
  background: #6f7f8f;
  opacity: 0.75;
  transform: none;
}

.reto-list-btn-delete {
  background: #8b1e3f;
}

.reto-list-btn-delete:hover {
  background: #6f1732;
}

#retos-back-btn {
  padding: 10px 20px; margin: 16px 5px 5px 5px;
  font-size: 14px; background: #2c7cc4; color: white;
  border: none; border-radius: 20px; cursor: pointer; transition: transform 0.12s;
}
#retos-back-btn:active { transform: scale(0.96); }

/* ============================================================
   RETOS — dialogs base
   ============================================================ */

#reto-crear-screen, #reto-codigo-screen, #reto-resultado-screen {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.82);
  align-items: center; justify-content: center;
  z-index: 7777; padding: 20px; box-sizing: border-box;
}

#reto-mode-selector {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}

.reto-mode-option-title {
  display: block;
  font-size: 15px;
  font-weight: 800;
}

.reto-mode-option-meta {
  display: block;
  font-size: 12px;
  opacity: 0.82;
  font-weight: 600;
}

#reto-crear-panel, #reto-codigo-panel, #reto-resultado-panel {
  background: white; color: #222; border-radius: 20px;
  padding: 32px 28px 28px 28px; max-width: 460px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4); text-align: center;
  animation: popIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
  max-height: 90vh; overflow-y: auto;
}

@keyframes popIn {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.reto-dialog-icono  { font-size: 48px; margin-bottom: 10px; }
.reto-dialog-titulo { font-size: 20px; font-weight: 800; color: #2c7cc4; margin-bottom: 18px; }

.reto-codigo-valor {
  font-size: 42px; font-weight: 900; color: #2c7cc4;
  letter-spacing: 6px; padding: 16px;
  background: #eef6ff; border-radius: 14px;
  border: 2px dashed #2c7cc4; margin-bottom: 10px;
  cursor: pointer; user-select: all;
  transition: transform 0.12s, box-shadow 0.12s;
}
.reto-codigo-valor:hover  { transform: scale(1.03); box-shadow: 0 4px 16px rgba(44,124,196,0.25); }
.reto-codigo-valor:active { transform: scale(0.97); }

.reto-codigo-label {
  font-size: 13px; color: #888; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px;
}
.reto-codigo-hint { font-size: 13px; color: #888; margin-top: 10px; line-height: 1.5; }

.reto-copy-feedback {
  font-size: 13px; font-weight: 700; color: #1a7a3c;
  background: #d4edda; border-radius: 8px;
  padding: 6px 14px; margin-bottom: 10px;
}

.reto-enlace-wrap {
  background: #f4f8ff; border: 1.5px solid #c5dcf5;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; text-align: left;
}
.reto-enlace-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: #6b8aad; margin-bottom: 6px;
}
.reto-enlace-valor {
  font-size: 13px; color: #2c7cc4; word-break: break-all;
  font-family: monospace; background: white;
  border: 1px solid #d0e8ff; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 8px; user-select: all;
}
#reto-copiar-enlace-btn {
  display: block; width: 100%; padding: 10px; font-size: 14px; font-weight: 700;
  background: #2c7cc4; color: white; border: none; border-radius: 20px;
  cursor: pointer; transition: transform 0.12s, background 0.15s;
}
#reto-copiar-enlace-btn:hover  { background: #1e66a3; }
#reto-copiar-enlace-btn:active { transform: scale(0.96); }
#reto-copiar-enlace-btn.copied { background: #28a745; }

#reto-whatsapp-btn {
  display: block; width: 100%; padding: 14px; font-size: 16px; font-weight: 700;
  background: linear-gradient(135deg,#25d366,#128c7e); color: white;
  border: none; border-radius: 30px; cursor: pointer; margin: 10px 0 6px 0;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(37,211,102,0.3);
}
#reto-whatsapp-btn:hover  { transform: translateY(-2px); }
#reto-whatsapp-btn:active { transform: scale(0.96); }

#reto-crear-botones, #reto-codigo-botones {
  display: flex; flex-direction: column; gap: 10px; margin-top: 18px;
}

#reto-crear-confirmar-btn, #reto-codigo-buscar-btn,
#reto-codigo-jugar-btn, #reto-resultado-cerrar-btn {
  padding: 14px; font-size: 16px; font-weight: 700;
  background: linear-gradient(135deg,#2c7cc4,#1e66a3); color: white;
  border: none; border-radius: 30px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(44,124,196,0.3);
}
#reto-crear-confirmar-btn:hover, #reto-codigo-buscar-btn:hover,
#reto-codigo-jugar-btn:hover, #reto-resultado-cerrar-btn:hover { transform: translateY(-2px); }
#reto-crear-confirmar-btn:active, #reto-codigo-buscar-btn:active,
#reto-codigo-jugar-btn:active, #reto-resultado-cerrar-btn:active { transform: scale(0.96); }

#reto-crear-cancelar-btn, #reto-codigo-cancelar-btn {
  padding: 12px; font-size: 15px; font-weight: 700;
  background: white; color: #888; border: 2px solid #ddd;
  border-radius: 30px; cursor: pointer; transition: transform 0.12s, border-color 0.15s;
}
#reto-crear-cancelar-btn:hover, #reto-codigo-cancelar-btn:hover { border-color: #aaa; }
#reto-crear-cancelar-btn:active, #reto-codigo-cancelar-btn:active { transform: scale(0.96); }

.reto-codigo-input {
  width: 100%; padding: 14px; border-radius: 10px;
  border: 2px solid #2c7cc4; font-size: 28px; font-weight: 900;
  text-align: center; letter-spacing: 5px; color: #2c7cc4;
  background: #eef6ff; box-sizing: border-box; margin-bottom: 10px; outline: none;
}
.reto-codigo-input:focus { border-color: #1e66a3; }

.reto-error {
  color: #b91c1c; font-size: 14px; font-weight: 700;
  padding: 8px 14px; background: #fef2f2;
  border-radius: 8px; border: 1px solid #fca5a5; margin-bottom: 8px;
}
.reto-info {
  font-size: 14px; color: #444; padding: 12px 14px;
  background: #eef6ff; border-radius: 10px;
  border-left: 4px solid #2c7cc4; text-align: left;
  line-height: 1.6; margin-bottom: 8px;
}

#reto-crear-estado { font-size: 14px; color: #666; margin-bottom: 10px; min-height: 20px; }

/* ============================================================
   RETOS — tabla resultado
   ============================================================ */

.reto-resultado-tabla {
  width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px;
}
.reto-resultado-tabla th {
  background: #eef6ff; color: #2c7cc4; padding: 10px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}
.reto-resultado-tabla td { padding: 10px; border-bottom: 1px solid #eee; color: #333; }
.reto-resultado-tabla tr:last-child td { border-bottom: none; }
.reto-fila-mia td { background: #fffbe6; font-weight: 700; }

.reto-veredicto {
  font-size: 22px; font-weight: 900; padding: 14px; border-radius: 14px; margin: 12px 0;
}
.reto-veredicto.ganado  { background: #d4edda; color: #1a6b30; }
.reto-veredicto.perdido { background: #f8d7da; color: #8b0000; }
.reto-veredicto.empate  { background: #e7f5ff; color: #0a7fe8; }

/* ================================================================
   NUEVAS MEJORAS — v13
   ================================================================ */

/* -- Botón secundario (enviar pregunta) ------------------------- */
.btn-secundario {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  color: rgba(255,255,255,0.75) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 20px !important;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  margin-top: 4px;
}
.btn-secundario:hover { border-color: rgba(255,255,255,0.7) !important; color: white !important; }

/* -- Badges fila ------------------------------------------------ */
.badges-row {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; margin-bottom: 8px;
}

/* Badge dificultad */
.dificultad-badge {
  display: none;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
}
.dif-facil   { background: rgba(76,175,80,0.2);   color: #a5d6a7; border: 1px solid rgba(76,175,80,0.4); }
.dif-media   { background: rgba(255,193,7,0.2);   color: #ffe082; border: 1px solid rgba(255,193,7,0.4); }
.dif-dificil { background: rgba(244,67,54,0.2);   color: #ef9a9a; border: 1px solid rgba(244,67,54,0.4); }

/* -- Puntuación — feedback flotante ---------------------------- */
#pts-feedback {
  position: absolute;
  top: 10px; right: 16px;
  font-size: 22px; font-weight: 900; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  pointer-events: none; z-index: 100;
}
.pts-feedback-hidden { opacity: 0; transform: translateY(0); }
.pts-feedback-show { animation: ptsPop 1.1s ease forwards; }
@keyframes ptsPop {
  0%   { opacity: 0; transform: translateY(0)   scale(0.7); }
  20%  { opacity: 1; transform: translateY(-20px) scale(1.15); }
  70%  { opacity: 1; transform: translateY(-28px) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.9); }
}

/* -- Explicación — Leer más ------------------------------------ */
.exp-texto-inner { display: inline; }
.exp-texto-contenido { white-space: pre-wrap; }
.btn-leer-mas {
  display: inline-block;
  background: none; border: none; padding: 0;
  color: #2c7cc4; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: underline;
  transition: color 0.15s;
}
.btn-leer-mas:hover { color: #1e66a3; }

/* -- Overlay anuncio (3s simulado) ---------------------------- */
#anuncio-overlay {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px; box-sizing: border-box;
}
#anuncio-overlay.hidden { display: none; }

#anuncio-panel {
  background: white; border-radius: 20px;
  padding: 36px 28px; max-width: 340px; width: 100%;
  text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  animation: popIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.anuncio-icono  { font-size: 52px; margin-bottom: 10px; }
.anuncio-titulo { font-size: 20px; font-weight: 800; color: #2c7cc4; margin-bottom: 16px; }
.anuncio-sub    { font-size: 13px; color: #888; margin-top: 10px; }
.anuncio-barra-wrap {
  background: #e0e0e0; border-radius: 20px; height: 10px;
  overflow: hidden; margin: 12px 0 8px 0;
}
#anuncio-barra {
  height: 100%; width: 100%;
  background: linear-gradient(to right, #2c7cc4, #1e66a3);
  border-radius: 20px;
}
.anuncio-contador {
  font-size: 28px; font-weight: 900; color: #2c7cc4; margin-top: 6px;
}

/* -- Pantalla Resultado Final ----------------------------------- */
#resultado-final-screen {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 30px 20px; background: rgba(0,0,0,0.6);
}
#resultado-final-panel {
  background: white; border-radius: 24px;
  padding: 36px 28px; max-width: 420px; width: 100%;
  text-align: center; box-shadow: 0 16px 48px rgba(0,0,0,0.3);
  animation: popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.resultado-final-icono { font-size: 56px; margin-bottom: 8px; }
.resultado-final-titulo { font-size: 22px; font-weight: 900; color: #1a3a5c; margin-bottom: 20px; }
.resultado-final-stats {
  display: flex; gap: 12px; justify-content: center; margin-bottom: 24px;
  flex-wrap: wrap;
}
.rf-stat {
  display: flex; flex-direction: column; align-items: center;
  background: #eef6ff; border-radius: 14px; padding: 12px 18px;
  min-width: 90px;
}
.rf-stat-label { font-size: 11px; font-weight: 700; color: #6b8aad; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px; }
.rf-stat-valor { font-size: 22px; font-weight: 900; color: #2c7cc4; }

/* Compartir resultado */
.share-resultado { margin-bottom: 20px; }
.share-label { font-size: 13px; color: #666; margin-bottom: 10px; font-weight: 600; }
.share-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.share-btn {
  padding: 10px 16px; font-size: 14px; font-weight: 700;
  border: none; border-radius: 20px; cursor: pointer;
  transition: transform 0.12s, filter 0.15s; color: white;
}
.share-btn:active { transform: scale(0.95); }
.share-btn:hover  { filter: brightness(1.08); }
.share-wa   { background: linear-gradient(135deg,#25d366,#128c7e); }
.share-fb   { background: linear-gradient(135deg,#1877f2,#145dbf); }
.share-copy { background: linear-gradient(135deg,#607d8b,#455a64); }
.share-copy-feedback {
  font-size: 13px; font-weight: 700; color: #1a7a3c;
  background: #d4edda; border-radius: 8px;
  padding: 6px 14px; margin-top: 8px; display: inline-block;
}
.resultado-final-acciones {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.resultado-final-acciones button {
  padding: 12px 20px; font-size: 15px; font-weight: 700;
  border: none; border-radius: 20px; cursor: pointer;
  transition: transform 0.12s;
}
.resultado-final-acciones button:first-child {
  background: linear-gradient(135deg,#2c7cc4,#1e66a3); color: white;
  box-shadow: 0 4px 12px rgba(44,124,196,0.3);
}
.resultado-final-acciones button:last-child {
  background: #f0f0f0; color: #555;
}
.resultado-final-acciones button:active { transform: scale(0.96); }

/* -- Retos — notificación --------------------------------------- */
.retos-divider {
  width: 100%; max-width: 280px;
  border-top: 1px solid rgba(255,255,255,0.25);
  margin: 8px 0 4px 0;
}
.retos-notif {
  background: rgba(0, 132, 230, 0.18); border: 1.5px solid rgba(42, 166, 255, 0.58);
  color: #bfeeff; border-radius: 20px; padding: 8px 18px;
  font-size: 14px; font-weight: 700; margin-top: 4px;
  animation: pulseNotif 2s ease-in-out infinite;
}
@keyframes pulseNotif { 0%,100%{opacity:1}50%{opacity:0.65} }

/* -- Retos — botón Desafiar ------------------------------------ */
.btn-desafiar {
  background: linear-gradient(135deg,#007fe9,#004fa8) !important;
  font-size: 17px !important; font-weight: 900 !important;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(0,132,230,0.35) !important;
}

/* -- Retos — badge modo ---------------------------------------- */
.reto-mode-badge {
  text-align: center;
  background: linear-gradient(135deg,#007fe9,#004fa8); color: white;
  padding: 6px 18px; border-radius: 20px; font-size: 13px; font-weight: 800;
  letter-spacing: 0.5px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,132,230,0.3);
}

/* -- Retos — selector tipo ------------------------------------- */
#reto-tipo-screen {
  position: fixed; top:0; left:0; width:100vw; height:100vh;
  background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 7777; padding: 20px; box-sizing: border-box;
}
#reto-tipo-panel {
  background: white; color: #222; border-radius: 20px;
  padding: 32px 28px; max-width: 380px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4); text-align: center;
  animation: popIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
#reto-tipo-botones { display: flex; gap: 14px; margin: 20px 0 16px 0; }
.btn-tipo-reto {
  flex: 1; padding: 18px 10px; border-radius: 16px; border: 2px solid transparent;
  cursor: pointer; font-size: 15px; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-tipo-reto small { font-size: 11px; font-weight: 500; opacity: 0.75; }
.btn-tipo-icono { font-size: 32px; }
.btn-1v1 { background: linear-gradient(135deg,#eef6ff,#d0e8ff); border-color: #2c7cc4; color: #1a5a99; }
.btn-1v1:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(44,124,196,0.3); }
.btn-grupo { background: linear-gradient(135deg,#f0fff4,#d0f0e0); border-color: #28a745; color: #1a6b30; }
.btn-grupo:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(40,167,69,0.3); }
#modo-selector {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}
.btn-cancelar-tipo {
  padding: 12px 28px; font-size: 15px; font-weight: 700;
  background: white; color: #888; border: 2px solid #ddd;
  border-radius: 30px; cursor: pointer; transition: transform 0.12s;
}
.btn-cancelar-tipo:hover { border-color: #aaa; }
.btn-cancelar-tipo:active { transform: scale(0.96); }

/* -- Retos — pantalla mis retos -------------------------------- */
#retos-screen {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; padding: 30px 20px; background: rgba(0,0,0,0.6);
}
#retos-tabs { display: flex; gap: 10px; margin: 16px 0; }
.reto-tab {
  padding: 8px 24px; border-radius: 20px; border: 2px solid #2c7cc4;
  background: transparent; color: white; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background 0.15s;
}
.reto-tab.active { background: #2c7cc4; }
#retos-list { width: 100%; max-width: 600px; list-style: none; padding: 0; }
.reto-list-item {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; padding: 14px 16px; margin: 8px 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
.reto-list-info { flex: 1; min-width: 0; }
.reto-list-codigo { font-size: 16px; font-weight: 900; color: #8fd3ff; letter-spacing: 1px; }
.reto-list-meta   { font-size: 12px; opacity: 0.75; margin-top: 2px; }
.reto-list-estado { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; display: inline-block; margin-top: 4px; }
.reto-estado-pendiente  { background:rgba(255,193,7,0.2);  color:#ffe082; border:1px solid rgba(255,193,7,0.5); }
.reto-estado-completado { background:rgba(76,175,80,0.2);  color:#a5d6a7; border:1px solid rgba(76,175,80,0.5); }
.reto-estado-expirado   { background:rgba(150,150,150,0.2);color:#bbb;    border:1px solid rgba(150,150,150,0.5); }
.reto-tipo-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; margin-left: 6px; }
.reto-tipo-1v1   { background:rgba(44,124,196,0.2); color:#8fd3ff; }
.reto-tipo-grupo { background:rgba(40,167,69,0.2);  color:#a5d6a7; }
.reto-list-btn {
  padding: 8px 16px; font-size: 13px; font-weight: 700;
  border-radius: 20px; border: none; cursor: pointer;
  background: #2c7cc4; color: white; transition: transform 0.12s; white-space: nowrap;
}
.reto-list-btn:active { transform: scale(0.96); }
.reto-list-btn:hover  { background: #1e66a3; }
#retos-back-btn {
  padding: 10px 20px; margin: 16px 5px 5px 5px; font-size: 14px;
  background: #2c7cc4; color: white; border: none; border-radius: 20px;
  cursor: pointer; transition: transform 0.12s;
}
#retos-back-btn:active { transform: scale(0.96); }

/* -- Retos — dialogs base -------------------------------------- */
#reto-crear-screen, #reto-codigo-screen, #reto-resultado-screen {
  position: fixed; top:0; left:0; width:100vw; height:100vh;
  background: rgba(0,0,0,0.82);
  align-items: center; justify-content: center;
  z-index: 7777; padding: 20px; box-sizing: border-box;
}
#reto-crear-panel, #reto-codigo-panel, #reto-resultado-panel {
  background: white; color: #222; border-radius: 20px;
  padding: 32px 28px; max-width: 460px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4); text-align: center;
  animation: popIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
  max-height: 90vh; overflow-y: auto;
}
@keyframes popIn { from{transform:scale(0.88);opacity:0} to{transform:scale(1);opacity:1} }
.reto-dialog-icono  { font-size: 48px; margin-bottom: 10px; }
.reto-dialog-titulo { font-size: 20px; font-weight: 800; color: #2c7cc4; margin-bottom: 18px; }
.reto-codigo-valor {
  font-size: 42px; font-weight: 900; color: #2c7cc4; letter-spacing: 6px;
  padding: 16px; background: #eef6ff; border-radius: 14px;
  border: 2px dashed #2c7cc4; margin-bottom: 10px;
  cursor: pointer; user-select: all; transition: transform 0.12s, box-shadow 0.12s;
}
.reto-codigo-valor:hover  { transform: scale(1.03); box-shadow: 0 4px 16px rgba(44,124,196,0.25); }
.reto-codigo-valor:active { transform: scale(0.97); }
.reto-codigo-label { font-size: 13px; color: #888; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.reto-codigo-hint  { font-size: 13px; color: #888; margin-top: 10px; line-height: 1.5; }
.reto-copy-feedback { font-size: 13px; font-weight: 700; color: #1a7a3c; background: #d4edda; border-radius: 8px; padding: 6px 14px; margin-bottom: 10px; }
.reto-enlace-wrap { background: #f4f8ff; border: 1.5px solid #c5dcf5; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; text-align: left; }
.reto-enlace-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: #6b8aad; margin-bottom: 6px; }
.reto-enlace-valor { font-size: 13px; color: #2c7cc4; word-break: break-all; font-family: monospace; background: white; border: 1px solid #d0e8ff; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; user-select: all; }
#reto-copiar-enlace-btn { display: block; width: 100%; padding: 10px; font-size: 14px; font-weight: 700; background: #2c7cc4; color: white; border: none; border-radius: 20px; cursor: pointer; transition: transform 0.12s, background 0.15s; }
#reto-copiar-enlace-btn:hover { background: #1e66a3; }
#reto-copiar-enlace-btn.copied { background: #28a745; }
#reto-whatsapp-btn { display: block; width: 100%; padding: 14px; font-size: 16px; font-weight: 700; background: linear-gradient(135deg,#25d366,#128c7e); color: white; border: none; border-radius: 30px; cursor: pointer; margin: 10px 0 6px 0; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 4px 12px rgba(37,211,102,0.3); }
#reto-whatsapp-btn:hover  { transform: translateY(-2px); }
#reto-whatsapp-btn:active { transform: scale(0.96); }
#reto-crear-botones, #reto-codigo-botones { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
#reto-crear-confirmar-btn, #reto-codigo-buscar-btn, #reto-codigo-jugar-btn, #reto-resultado-cerrar-btn {
  padding: 14px; font-size: 16px; font-weight: 700;
  background: linear-gradient(135deg,#2c7cc4,#1e66a3); color: white;
  border: none; border-radius: 30px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 4px 12px rgba(44,124,196,0.3);
}
#reto-crear-confirmar-btn:hover, #reto-codigo-buscar-btn:hover, #reto-codigo-jugar-btn:hover, #reto-resultado-cerrar-btn:hover { transform: translateY(-2px); }
#reto-crear-cancelar-btn, #reto-codigo-cancelar-btn {
  padding: 12px; font-size: 15px; font-weight: 700;
  background: white; color: #888; border: 2px solid #ddd;
  border-radius: 30px; cursor: pointer; transition: transform 0.12s;
}
#reto-crear-cancelar-btn:hover, #reto-codigo-cancelar-btn:hover { border-color: #aaa; }
.reto-codigo-input {
  width: 100%; padding: 14px; border-radius: 10px; border: 2px solid #2c7cc4;
  font-size: 28px; font-weight: 900; text-align: center; letter-spacing: 5px;
  color: #2c7cc4; background: #eef6ff; box-sizing: border-box; margin-bottom: 10px; outline: none;
}
.reto-codigo-input:focus { border-color: #1e66a3; }
.reto-error { color:#b91c1c; font-size:14px; font-weight:700; padding:8px 14px; background:#fef2f2; border-radius:8px; border:1px solid #fca5a5; margin-bottom:8px; }
.reto-info  { font-size:14px; color:#444; padding:12px 14px; background:#eef6ff; border-radius:10px; border-left:4px solid #2c7cc4; text-align:left; line-height:1.6; margin-bottom:8px; }
#reto-crear-estado { font-size:14px; color:#666; margin-bottom:10px; min-height:20px; }
.reto-resultado-tabla { width:100%; border-collapse:collapse; margin:16px 0; font-size:15px; }
.reto-resultado-tabla th { background:#eef6ff; color:#2c7cc4; padding:10px; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; }
.reto-resultado-tabla td { padding:10px; border-bottom:1px solid #eee; color:#333; }
.reto-resultado-tabla tr:last-child td { border-bottom:none; }
.reto-fila-mia td { background:#fffbe6; font-weight:700; }
.reto-veredicto { font-size:22px; font-weight:900; padding:14px; border-radius:14px; margin:12px 0; }
.reto-veredicto.ganado  { background:#d4edda; color:#1a6b30; }
.reto-veredicto.perdido { background:#f8d7da; color:#8b0000; }
.reto-veredicto.empate  { background:#e7f5ff; color:#0a7fe8; }
/* ===== ANUNCIO VIDA EXTRA (MEJORA UI) ===== */

.ad-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  opacity: 0.9;
}

.ad-reward {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 10px;
  color: #8fd3ff;
}

.ad-stats {
  font-size: 14px;
  opacity: 0.75;
}
#auth-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

.hidden {
display: none !important;
}

.auth-screen {
display: flex !important;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.auth-screen.hidden {
display: none !important;
}

.auth-box {
width: 320px;
padding: 30px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.6);
text-align: center;
color: #fff;
}

#auth-screen #game-logo {
margin: 0 auto;
}

.auth-switch-copy {
margin: 6px 0 0;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
color: rgba(255, 255, 255, 0.92);
}

.auth-switch-copy-alt {
margin-bottom: 10px;
color: #ffd27a;
}

.auth-box input {
width: 100%;
padding: 10px;
margin: 8px 0;
font-size: 16px;
}

#auth-password {
padding-right: 46px;
}

.auth-password-toggle-inline {
position: relative;
display: block;
width: 32px !important;
height: 32px;
margin: -44px 10px 6px auto !important;
padding: 0 !important;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
color: #fff;
font-size: 18px;
line-height: 1;
cursor: pointer;
z-index: 2;
}

.auth-password-toggle-inline:hover {
background: rgba(255, 255, 255, 0.24);
}

.auth-password-hint {
margin: 0 0 10px;
font-size: 12px;
line-height: 1.45;
color: #ffd27a;
text-align: left;
}

.auth-box button {
width: 100%;
padding: 10px;
margin-top: 8px;
font-size: 16px;
}

.auth-box input,
.auth-box button {
width: 100%;
box-sizing: border-box;
}

#auth-login-btn {
background: linear-gradient(135deg, #007fe9, #004fa8);
color: #fff;
border: none;
font-weight: 800;
}

#auth-register-btn {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.28);
font-weight: 700;
}

#reset-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.modal-content {
  width: 90%;
  max-width: 320px;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  color: #22313f;
  text-align: center;
  box-sizing: border-box;
  z-index: 10000;
}

.modal-content h3 {
  margin: 0 0 14px;
  font-size: 20px;
}

.modal-content input,
.modal-content button {
  width: 100%;
  box-sizing: border-box;
}

.modal-content input {
  padding: 11px;
  margin: 8px 0;
  border: 1px solid #d8dee6;
  border-radius: 8px;
  font-size: 16px;
}

.modal-content button {
  padding: 11px;
  margin-top: 8px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

#reset-send-btn {
  background: #2c7cc4;
  color: #fff;
}

#reset-error {
  margin: 8px 0 2px;
  font-size: 13px;
  line-height: 1.3;
}

#reset-error.error {
  color: #c62828;
}

#reset-error.success {
  color: #1b7f3a;
}

/* ===== AJUSTES UX FINALES ===== */

#inicio-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(143, 211, 255, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(7, 24, 43, 0.18), rgba(0, 0, 0, 0.24));
  pointer-events: none;
}

#inicio-screen > * {
  position: relative;
  z-index: 1;
}

#inicio-screen.fade-in {
  animation: fadeInUp 0.5s ease forwards;
}

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#auth-session-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(10, 24, 39, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(10px);
}

.barra-top {
  position: relative;
  width: 100%;
  max-width: 420px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  margin: 0 auto;
  box-sizing: border-box;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  transform: none;
}

.user-area {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: calc(100% - 116px);
  font-size: 12px;
}

.barra-top #auth-session-bar {
  position: static;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
}

#auth-current-user {
  display: inline-block;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}

#auth-logout-btn,
#enviar-pregunta-btn,
#ads-stats-btn,
#question-stats-btn {
  width: auto !important;
  max-width: none !important;
}

#auth-logout-btn {
  margin: 0 !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

#inicio-screen #lang-selector {
  top: 8px;
  right: 12px;
  z-index: 6;
}

#inicio-screen .barra-top #lang-selector {
  position: static;
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
  background: transparent;
}

#inicio-screen #lang-selector .lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: none !important;
  min-width: auto;
  min-height: 0;
  padding: 4px 8px !important;
  margin: 0 !important;
  font-size: 11px !important;
  border: 1px solid #ccc !important;
  background: #fff !important;
  color: #22313f !important;
  opacity: 1;
  border-radius: 12px !important;
  backdrop-filter: none;
}

#inicio-screen #lang-selector .lang-btn:hover {
  background: #f3f6f9 !important;
}

#inicio-screen #lang-selector .lang-btn.active {
  background: #2c7cc4 !important;
  color: #fff !important;
  border-color: #2c7cc4 !important;
}

#inicio-screen button.lang-btn {
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

#game-logo {
  height: 140px;
  width: auto;
  margin: 0;
  display: block;
}

.intro-title {
  max-width: 420px;
  font-size: clamp(28px, 4.3vw, 40px);
  line-height: 1.08;
  margin: 0 0 6px;
  letter-spacing: -0.03em;
}

.intro-text {
  max-width: 360px;
  font-size: 15px;
  opacity: 0.8;
  margin: 0 0 14px;
}

.weekly-challenges {
  width: 100%;
  max-width: 320px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  text-align: left;
  overflow: hidden;
}

.weekly-challenges-head {
  margin: 0;
}

.weekly-challenges-toggle {
  width: 100%;
  max-width: none !important;
  min-height: 44px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: pointer;
  text-align: left;
}

.weekly-challenges-arrow {
  flex: 0 0 18px;
  width: 18px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  transform-origin: 50% 50%;
  transition: transform 0.25s ease;
}

.weekly-challenges.is-open .weekly-challenges-arrow {
  transform: rotate(90deg);
}

.weekly-challenges-toggle-text {
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.weekly-challenges h3 {
  min-width: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
}

#weekly-challenges-summary {
  flex: 0 0 auto;
  font-size: 11px;
  opacity: 0.82;
  white-space: nowrap;
}

.weekly-challenges-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
}

.weekly-challenges.is-open .weekly-challenges-panel {
  max-height: 420px;
  margin-top: 10px;
  opacity: 1;
}

#weekly-challenges-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.weekly-challenge-item {
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

.weekly-challenge-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  line-height: 1.25;
}

.weekly-challenge-row span {
  min-width: 0;
}

.weekly-challenge-row strong {
  flex: 0 0 auto;
  color: #8fd3ff;
}

.weekly-challenge-bar {
  height: 6px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
}

.weekly-challenge-bar span {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: #2c7cc4;
  transition: width 0.2s ease;
}

.weekly-challenge-reward {
  margin-top: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.76);
}

.weekly-challenge-item.completed .weekly-challenge-bar span {
  background: #39b56a;
}

.weekly-challenge-empty {
  padding: 8px;
  font-size: 12px;
  opacity: 0.8;
}

.weekly-challenge-popup {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 10001;
  width: calc(100% - 32px);
  max-width: 340px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(8, 21, 34, 0.94);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.weekly-challenge-popup.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

#player-name {
  display: none !important;
}

.btn-principal {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-principal:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.btn-principal:active {
  transform: scale(0.97);
}

#inicio-screen button {
  max-width: 320px;
}

#start-btn,
#ranking-btn {
  min-height: 58px;
}

#start-btn {
  width: 100%;
  max-width: 320px;
  margin: 10px 0;
  padding: 15px;
  border-radius: 12px;
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #3b82f6;
  color: #fff;
  box-shadow: none;
  transition: none;
}

#reto-ver-btn,
#reto-desafiar-btn {
  min-height: 52px;
}

.btn-secundario {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

#reset-cancel-btn {
  background: #eef2f6 !important;
  color: #22313f !important;
  border: 1px solid #d8dee6 !important;
  box-shadow: none !important;
}

#enviar-pregunta-btn,
#ads-stats-btn,
#question-stats-btn {
  padding: 12px 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 18px !important;
}

.retos-divider {
  margin: 18px 0 8px 0;
  opacity: 0.7;
}

@media (max-width: 640px) {
  #auth-session-bar {
    justify-content: space-between;
  }

  #auth-current-user {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .intro-title {
    max-width: 320px;
  }
}

@media (min-width: 768px) {
  .container {
    width: 100%;
  }

  #inicio-screen {
    width: 100vw;
    max-width: none;
    align-self: stretch;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ===== MENU INICIO PREMIUM SPORT ===== */

:root {
  --sport-blue: #1d9bff;
  --sport-blue-strong: #0a7fe8;
  --sport-ink: rgba(2, 10, 20, 0.78);
  --sport-ink-soft: rgba(9, 21, 35, 0.64);
  --sport-line: rgba(69, 172, 255, 0.48);
  --sport-orange: #1d9bff;
  --sport-orange-deep: #064f9f;
  --sport-white: rgba(255, 255, 255, 0.94);
}

body::before {
  filter: saturate(1.05) contrast(1.08) brightness(0.78);
}

#inicio-screen {
  min-height: 100svh;
  padding: 8px 18px 28px;
  gap: 0;
  background:
    linear-gradient(180deg, rgba(0, 8, 18, 0.5) 0%, rgba(0, 9, 20, 0.74) 43%, rgba(0, 5, 13, 0.92) 100%),
    rgba(0, 0, 0, 0.42);
  isolation: isolate;
}

#inicio-screen::after {
  background:
    radial-gradient(circle at 50% 8%, rgba(38, 160, 255, 0.26), transparent 24%),
    radial-gradient(circle at 50% 92%, rgba(12, 106, 190, 0.18), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.28));
}

#inicio-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%);
  opacity: 0.18;
}

#inicio-screen .barra-top {
  max-width: 380px;
  padding: 6px 0;
  margin-bottom: 2px;
}

#auth-session-bar,
.barra-top #auth-session-bar {
  border-radius: 10px;
  background: rgba(3, 15, 29, 0.58);
  border: 1px solid rgba(90, 183, 255, 0.24);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
}

#inicio-screen #lang-selector .lang-btn {
  height: 28px !important;
  min-width: 44px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(93, 180, 255, 0.34) !important;
  background: rgba(3, 15, 29, 0.58) !important;
  color: rgba(235, 246, 255, 0.78) !important;
  font-size: 10px !important;
  letter-spacing: 0 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(12px);
}

#inicio-screen #lang-selector .lang-btn.active {
  background: linear-gradient(180deg, rgba(24, 138, 238, 0.95), rgba(6, 66, 130, 0.94)) !important;
  border-color: rgba(108, 197, 255, 0.82) !important;
  color: #fff !important;
}

#inicio-screen #game-logo {
  height: clamp(96px, 18vh, 130px);
  margin: 2px 0 6px;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}

.intro-title {
  max-width: 360px;
  margin-bottom: 7px;
  color: var(--sport-white);
  font-size: clamp(26px, 7.1vw, 34px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.6);
}

.intro-title br,
.intro-title span {
  color: var(--sport-blue);
}

.intro-text {
  max-width: 330px;
  margin-bottom: 16px;
  color: rgba(239, 247, 255, 0.82);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.weekly-challenges {
  max-width: 340px;
  margin-bottom: 14px;
  padding: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(8, 22, 38, 0.72), rgba(3, 10, 20, 0.66));
  border: 1px solid rgba(106, 188, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(14px);
}

.weekly-challenges-toggle {
  min-height: 42px;
  padding: 0 13px !important;
  border-radius: 8px !important;
}

.weekly-challenges-toggle::before {
  content: "";
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #20a4ff, #0b63c7);
  box-shadow: 0 0 14px rgba(29, 155, 255, 0.7);
}

.weekly-challenges-arrow {
  order: 3;
  color: rgba(137, 203, 255, 0.84);
}

.weekly-challenges h3 {
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
}

#weekly-challenges-summary {
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 700;
}

.weekly-challenges.is-open .weekly-challenges-panel {
  margin: 0 10px 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(106, 188, 255, 0.18);
}

.weekly-challenge-item {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.weekly-challenge-bar {
  background: rgba(255, 255, 255, 0.14);
}

.weekly-challenge-bar span {
  background: linear-gradient(90deg, var(--sport-blue-strong), #58c5ff);
  box-shadow: 0 0 12px rgba(29, 155, 255, 0.42);
}

#inicio-screen button.btn-principal {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 340px;
  min-height: 54px;
  margin: 5px 0;
  padding: 0 44px 0 66px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--sport-line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(12, 31, 51, 0.76), rgba(2, 9, 18, 0.78));
  color: #f8fbff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;
}

#inicio-screen button.btn-principal::before {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(28, 145, 255, 0.95), rgba(10, 72, 153, 0.98));
  color: #dff3ff;
  font-size: 18px;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 18px rgba(29, 155, 255, 0.32);
  transform: translateY(-50%);
}

#inicio-screen button.btn-principal::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid rgba(116, 198, 255, 0.85);
  border-right: 2px solid rgba(116, 198, 255, 0.85);
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.16s ease, border-color 0.16s ease;
}

#inicio-screen button.btn-principal:hover {
  transform: translateY(-2px);
  border-color: rgba(115, 203, 255, 0.86);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 44%),
    linear-gradient(180deg, rgba(16, 43, 70, 0.82), rgba(3, 14, 27, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 14px 28px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(29, 155, 255, 0.14);
}

#inicio-screen button.btn-principal:hover::after {
  transform: translate(2px, -50%) rotate(45deg);
  border-color: #fff;
}

#inicio-screen button.btn-principal:active {
  transform: translateY(0) scale(0.985);
  filter: brightness(0.95);
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.38),
    0 7px 18px rgba(0, 0, 0, 0.25);
}

#start-btn::before {
  content: "▶";
  font-size: 15px !important;
  padding-left: 2px;
}

#ranking-btn::before {
  content: "▥";
}

#reto-ver-btn::before {
  content: "◇";
}

#profile-btn::before {
  content: "◉";
}

#reto-desafiar-btn.btn-desafiar {
  margin-top: 8px;
  border-color: rgba(0, 128, 229, 0.78);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 40%),
    linear-gradient(180deg, rgba(2, 33, 72, 0.96), rgba(0, 12, 31, 0.98));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 22, 54, 0.42),
    0 13px 28px rgba(0, 0, 0, 0.32),
    0 0 20px rgba(0, 132, 230, 0.18);
}

#reto-desafiar-btn.btn-desafiar::before {
  content: "●●";
  letter-spacing: -5px;
  padding-right: 5px;
  background: linear-gradient(180deg, rgba(42, 184, 255, 0.95), rgba(0, 82, 176, 0.98));
  color: #f0fbff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 20px rgba(0, 132, 230, 0.36);
}

#reto-desafiar-btn.btn-desafiar::after {
  border-color: rgba(142, 220, 255, 0.94);
}

#reto-desafiar-btn.btn-desafiar:hover {
  border-color: rgba(42, 166, 255, 0.98);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(3, 48, 96, 0.98), rgba(0, 20, 48, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 15px 30px rgba(0, 0, 0, 0.36),
    0 0 24px rgba(0, 132, 230, 0.24);
}

.retos-divider {
  width: 100%;
  max-width: 340px;
  height: 1px;
  margin: 12px 0 3px;
  background: linear-gradient(90deg, transparent, rgba(105, 187, 255, 0.28), transparent);
}

#enviar-pregunta-btn,
#ads-stats-btn,
#question-stats-btn {
  min-height: 38px;
  margin-top: 16px !important;
  padding: 0 18px !important;
  border-radius: 7px !important;
  border-color: rgba(152, 209, 255, 0.22) !important;
  background: rgba(3, 14, 27, 0.54) !important;
  color: rgba(239, 247, 255, 0.84) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

#enviar-pregunta-btn:hover,
#ads-stats-btn:hover,
#question-stats-btn:hover {
  border-color: rgba(152, 209, 255, 0.44) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 420px) {
  #inicio-screen {
    padding: 6px 14px 22px;
  }

  #inicio-screen .barra-top,
  .weekly-challenges,
  #inicio-screen button.btn-principal,
  .retos-divider {
    max-width: 100%;
  }

  #inicio-screen #game-logo {
    height: clamp(86px, 16vh, 116px);
  }

  .intro-title {
    font-size: clamp(24px, 7.4vw, 30px);
  }

  .intro-text {
    margin-bottom: 13px;
    font-size: 13px;
  }

  #inicio-screen button.btn-principal {
    min-height: 51px;
    padding-left: 60px;
    padding-right: 38px;
    font-size: 13px;
  }

  #inicio-screen button.btn-principal::before {
    left: 14px;
    width: 31px;
    height: 31px;
    font-size: 16px;
  }

  #inicio-screen button.btn-principal::after {
    right: 15px;
  }
}

@media (max-height: 700px) {
  #inicio-screen {
    padding-bottom: 18px;
  }

  #inicio-screen #game-logo {
    height: 86px;
    margin-bottom: 2px;
  }

  .intro-title {
    font-size: 24px;
  }

  .intro-text {
    margin-bottom: 10px;
  }

  .weekly-challenges {
    margin-bottom: 10px;
  }

  #inicio-screen button.btn-principal {
    min-height: 48px;
    margin-top: 4px;
    margin-bottom: 4px;
  }
}

@media (max-width: 480px) {
  .barra-top {
    max-width: 100%;
    padding: 6px 10px;
  }

  .user-area {
    max-width: calc(100% - 96px);
  }

  #auth-current-user {
    max-width: 90px;
    font-size: 11px;
  }

  #auth-logout-btn {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  #inicio-screen #lang-selector .lang-btn {
    font-size: 10px !important;
    padding: 3px 6px !important;
  }
}

.answer-btn.selected {
  background-color: #66bb6a !important;
  color: white !important;
  border-color: #43a047 !important;
  transform: scale(1.03);
  transition: all 0.2s ease;
}

.logout-mini {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(119, 198, 255, 0.2);
  background: linear-gradient(135deg, rgba(11, 31, 50, 0.52), rgba(17, 68, 105, 0.36));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 0 12px rgba(62, 171, 255, 0.12);
  color: rgba(230, 247, 255, 0.9);
  cursor: pointer;
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.logout-mini:hover,
.logout-mini:focus-visible {
  border-color: rgba(141, 214, 255, 0.38);
  background: linear-gradient(135deg, rgba(18, 52, 80, 0.62), rgba(24, 91, 134, 0.44));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 16px rgba(68, 181, 255, 0.2);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.logout-mini:active {
  transform: translateY(0);
}

.logout-mini-icon {
  position: relative;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border: 1.8px solid currentColor;
  border-right: 0;
  border-radius: 3px 0 0 3px;
  opacity: 0.86;
}

.logout-mini-icon::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 8px;
  height: 1.8px;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(-50%);
}

.logout-mini-icon::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

#inicio-screen #game-logo {
  height: 140px !important;
  width: auto !important;
  margin: 0 !important;
  display: block !important;
}

/* Refuerzo visual del ranking semanal */
#ranking-list,
.ranking-list {
  list-style: none;
  padding: 0;
}

#ranking-list li,
.ranking-list li {
  background: rgba(255,255,255,0.08);
  margin-bottom: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(6px);
}

#ranking-list li.ranking-top-1,
.ranking-top-1 {
  background: linear-gradient(135deg, #FFD700, #FFC107);
  color: #000;
}

#ranking-list li.ranking-top-2,
.ranking-top-2 {
  background: linear-gradient(135deg, #C0C0C0, #9E9E9E);
  color: #000;
}

#ranking-list li.ranking-top-3,
.ranking-top-3 {
  background: linear-gradient(135deg, #CD7F32, #A97142);
  color: #fff;
}

#ranking-list li.ranking-current-user,
.ranking-current-user {
  border: 2px solid #4CAF50;
  transform: scale(1.02);
}

.ranking-row-main {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}

.ranking-row-meta {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 4px;
}

.ranking-position {
  font-weight: bold;
  margin-right: 8px;
}

/* Consolidacion final del menu premium: gana a reglas legacy posteriores. */
#inicio-screen #game-logo {
  height: clamp(96px, 18vh, 130px) !important;
  margin: 2px 0 6px !important;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}

@media (max-width: 420px) {
  #inicio-screen #game-logo {
    height: clamp(86px, 16vh, 116px) !important;
  }
}

/* Evento diario: tratamiento especial premium sin tocar la logica. */
#btn-diario {
  border-color: rgba(92, 196, 255, 0.72) !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(38, 171, 255, 0.18), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(15, 42, 68, 0.84), rgba(3, 12, 24, 0.82)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    0 11px 25px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(29, 155, 255, 0.16) !important;
}

#btn-diario::before {
  content: "" !important;
  background:
    radial-gradient(circle at 38% 62%, #e9f8ff 0 1.6px, transparent 1.9px),
    radial-gradient(circle at 62% 62%, #e9f8ff 0 1.6px, transparent 1.9px),
    linear-gradient(90deg, transparent 0 25%, rgba(233, 248, 255, 0.95) 25% 32%, transparent 32% 68%, rgba(233, 248, 255, 0.95) 68% 75%, transparent 75%),
    linear-gradient(#e9f8ff 0 0) 50% 58% / 17px 14px no-repeat,
    linear-gradient(90deg, #8bd7ff 0 100%) 50% 43% / 17px 4px no-repeat,
    linear-gradient(180deg, rgba(38, 170, 255, 0.98), rgba(8, 76, 157, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 16px rgba(45, 177, 255, 0.5),
    0 0 28px rgba(45, 177, 255, 0.18) !important;
  animation: dailyIconPulse 2.8s ease-in-out infinite;
}

#btn-diario::after {
  content: attr(data-today-label) !important;
  right: 14px !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 7px;
  border: 1px solid rgba(126, 211, 255, 0.52) !important;
  border-radius: 999px;
  background: rgba(9, 30, 51, 0.72);
  color: rgba(224, 245, 255, 0.9);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%) !important;
  box-shadow: 0 0 12px rgba(29, 155, 255, 0.16);
}

#btn-diario:hover {
  border-color: rgba(132, 216, 255, 0.98) !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(50, 190, 255, 0.24), transparent 25%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(20, 55, 86, 0.9), rgba(5, 18, 33, 0.86)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 14px 30px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(29, 155, 255, 0.22) !important;
}

#btn-diario:hover::before {
  transform: translateY(-50%) scale(1.045) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 0 20px rgba(67, 195, 255, 0.62),
    0 0 34px rgba(67, 195, 255, 0.24) !important;
}

#btn-diario:hover::after {
  color: #fff;
  border-color: rgba(164, 226, 255, 0.8) !important;
}

@keyframes dailyIconPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 0 15px rgba(45, 177, 255, 0.44),
      0 0 26px rgba(45, 177, 255, 0.14);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      0 0 18px rgba(45, 177, 255, 0.58),
      0 0 30px rgba(45, 177, 255, 0.2);
  }
}

@media (max-height: 700px) {
  #inicio-screen #game-logo {
    height: 86px !important;
    margin-bottom: 2px !important;
  }
}

/* ===== AUTH PREMIUM SPORT ===== */

#auth-screen.auth-screen {
  position: relative;
  min-height: 100svh;
  padding: 18px 12px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 8%, rgba(34, 157, 255, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(0, 8, 18, 0.34), rgba(0, 7, 16, 0.78));
  overflow-x: hidden;
  overflow-y: auto;
}

#auth-screen.auth-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: 0.14;
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 78%, transparent 100%);
}

#auth-screen .auth-box {
  position: relative;
  z-index: 1;
  width: min(100%, 386px);
  padding: 24px 24px 25px;
  border-radius: 18px;
  border: 1px solid rgba(77, 184, 255, 0.62);
  background:
    radial-gradient(circle at 50% 0%, rgba(61, 182, 255, 0.14), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(6, 27, 48, 0.82), rgba(0, 8, 17, 0.82));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 22px 50px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(29, 155, 255, 0.16);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#auth-screen .auth-box::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(68, 181, 255, 0.18), transparent 38%);
}

#auth-screen #game-logo {
  position: relative;
  z-index: 1;
  order: 1;
  height: 96px !important;
  width: auto !important;
  margin: 0 auto 14px !important;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
}

#auth-screen #auth-title {
  position: relative;
  z-index: 1;
  order: 3;
  margin: 0 0 6px;
  color: rgba(248, 252, 255, 0.98);
  font-size: 27px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.55);
}

#auth-screen #auth-subtitle {
  position: relative;
  z-index: 1;
  order: 4;
  margin: 0 0 20px;
  color: rgba(229, 243, 255, 0.78);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

#auth-screen .auth-switch-copy {
  position: relative;
  z-index: 1;
  order: 2;
  margin: 0 0 7px;
  color: rgba(232, 244, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

#auth-screen .auth-switch-copy-alt {
  display: none !important;
  margin: 0;
  color: rgba(255, 197, 111, 0.94);
}

#auth-screen .auth-box input {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 52px;
  margin: 0 0 12px;
  padding: 0 14px 0 42px;
  border-radius: 9px;
  border: 1px solid rgba(77, 184, 255, 0.54);
  outline: none;
  background-color: rgba(1, 12, 24, 0.62);
  color: rgba(248, 252, 255, 0.96);
  font-size: 15px;
  font-weight: 650;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 18px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

#auth-email {
  order: 7;
}

#auth-screen .auth-box input::placeholder {
  color: rgba(226, 242, 255, 0.58);
  font-weight: 600;
}

#auth-screen .auth-box input:focus {
  border-color: rgba(131, 214, 255, 0.95);
  background-color: rgba(3, 18, 34, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 3px rgba(29, 155, 255, 0.12),
    0 0 18px rgba(29, 155, 255, 0.18);
}

#auth-email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238bd7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='14' x='3' y='5' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px 50%;
  background-size: 17px 17px;
}

#auth-password {
  order: 8;
  padding-right: 48px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238bd7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px 50%;
  background-size: 17px 17px;
}

#auth-nickname {
  order: 7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238bd7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px 50%;
  background-size: 17px 17px;
}

#auth-screen .auth-password-toggle-inline {
  order: 8;
  z-index: 2;
  width: 32px !important;
  height: 32px;
  min-height: 32px !important;
  margin: -54px 8px 13px auto !important;
  border: 1px solid rgba(139, 215, 255, 0.22);
  background: rgba(4, 17, 31, 0.34);
  color: rgba(225, 244, 255, 0.72);
  font-size: 15px;
  box-shadow: none;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

#auth-screen .auth-password-toggle-inline:hover {
  border-color: rgba(139, 215, 255, 0.52);
  background: rgba(15, 52, 82, 0.54);
  color: #fff;
}

#auth-screen .auth-password-hint,
#auth-screen #auth-nickname-error,
#auth-screen #auth-message {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: -3px 0 13px;
  padding-left: 2px;
  color: rgba(255, 206, 128, 0.9);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

#auth-screen .auth-password-hint {
  order: 9;
}

#auth-screen #auth-nickname-error,
#auth-screen #auth-message {
  order: 10;
}

#auth-screen .auth-box button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 52px;
  margin-top: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

#auth-login-btn {
  order: 10;
  margin-top: 4px !important;
  border: 1px solid rgba(0, 128, 229, 0.78) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 40%),
    linear-gradient(180deg, rgba(2, 33, 72, 0.96), rgba(0, 12, 31, 0.98)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 10px 24px rgba(0, 0, 0, 0.32),
    0 0 18px rgba(0, 132, 230, 0.18) !important;
}

#auth-login-btn:hover {
  border-color: rgba(42, 166, 255, 0.98) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 13px 28px rgba(0, 0, 0, 0.38),
    0 0 22px rgba(0, 132, 230, 0.24) !important;
}

#auth-login-btn:active,
#auth-register-btn:active {
  transform: scale(0.985);
}

#auth-register-btn {
  order: 12;
  min-height: 50px !important;
  border: 1px solid rgba(77, 184, 255, 0.56) !important;
  background: rgba(3, 16, 31, 0.42) !important;
  color: rgba(232, 246, 255, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 18px rgba(0, 0, 0, 0.16) !important;
}

#auth-register-btn:hover {
  border-color: rgba(127, 209, 255, 0.88) !important;
  background: rgba(8, 35, 62, 0.58) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

#auth-reset-btn.btn-secundario {
  order: 11;
  min-height: auto;
  width: auto !important;
  max-width: none !important;
  margin: 12px auto 15px !important;
  padding: 2px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(126, 211, 255, 0.78) !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
  text-decoration: none;
}

#auth-reset-btn.btn-secundario:hover {
  color: #fff !important;
  transform: none !important;
  text-shadow: 0 0 12px rgba(29, 155, 255, 0.42);
}

#auth-screen .auth-box .google-login-btn {
  order: 5;
  width: 100% !important;
  max-width: none !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  border: none !important;
  border-radius: 28px !important;
  background: #fff !important;
  color: #222 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-sizing: border-box;
  margin: 0 0 21px !important;
  box-shadow:
    0 11px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

#auth-screen .auth-box .google-login-btn.hidden {
  display: none !important;
}

#auth-screen .auth-box .google-login-btn:hover {
  opacity: 0.95;
  transform: none !important;
}

#auth-screen .auth-box .google-login-btn .google-icon {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  object-fit: contain;
  flex: 0 0 18px;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#auth-screen .auth-divider {
  order: 6;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0 0 18px;
  color: rgba(199, 229, 247, 0.78);
  font-size: 17px;
  font-weight: 850;
  line-height: 1;
}

#auth-screen .auth-divider::before,
#auth-screen .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(84, 190, 255, 0.46));
}

#auth-screen .auth-divider::after {
  background: linear-gradient(90deg, rgba(84, 190, 255, 0.46), transparent);
}

#auth-screen .auth-bottom-divider {
  order: 13;
  width: 100%;
  height: 1px;
  margin: 18px 0 13px;
  background: linear-gradient(90deg, transparent, rgba(84, 190, 255, 0.4), transparent);
}

#auth-screen .auth-guest-btn {
  order: 14;
  min-height: 38px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(126, 211, 255, 0.9) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: none !important;
}

#auth-screen .auth-guest-btn:hover {
  color: #fff !important;
  transform: none !important;
  text-shadow: 0 0 12px rgba(29, 155, 255, 0.35);
}

#auth-screen .auth-guest-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: center/18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238bd7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

#auth-screen .auth-guest-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.05;
}

#auth-screen .auth-guest-text strong {
  color: inherit;
  font-size: 13px;
  font-weight: 850;
}

#auth-screen .auth-guest-text small {
  color: rgba(220, 235, 246, 0.58);
  font-size: 11px;
  font-weight: 650;
}

#auth-screen .auth-back-btn {
  order: 15;
  min-height: 34px !important;
  width: auto !important;
  max-width: none !important;
  margin: 12px auto 0 !important;
  padding: 0 10px !important;
  border: 1px solid rgba(126, 211, 255, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(3, 16, 31, 0.22) !important;
  color: rgba(226, 242, 255, 0.72) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

#auth-screen .auth-back-btn:hover {
  border-color: rgba(126, 211, 255, 0.46) !important;
  background: rgba(8, 35, 62, 0.38) !important;
  color: #fff !important;
  transform: none !important;
}

#auth-screen .auth-box:has(#auth-nickname:not(.hidden)) .auth-divider,
#auth-screen .auth-box:has(#auth-nickname:not(.hidden)) .auth-bottom-divider,
#auth-screen .auth-box:has(#auth-nickname:not(.hidden)) .auth-guest-btn {
  display: none !important;
}

@media (max-width: 420px) {
  #auth-screen.auth-screen {
    padding: 18px 12px;
  }

  #auth-screen .auth-box {
    width: min(100%, 386px);
    padding: 22px 22px 23px;
    border-radius: 16px;
  }

  #auth-screen #game-logo {
    height: 86px !important;
  }

  #auth-screen #auth-title {
    font-size: 25px;
  }

  #auth-screen .auth-box input,
  #auth-screen .auth-box button {
    min-height: 50px;
  }
}

/* ===== SELECTORES DE MODO PREMIUM UNIFICADOS ===== */

body > div:has(#modo-selector),
.mode-select-screen,
#reto-tipo-screen,
#reto-crear-screen,
#reto-codigo-screen,
#reto-resultado-screen {
  background:
    radial-gradient(circle at 50% 12%, rgba(30, 150, 255, 0.2), transparent 28%),
    rgba(0, 5, 12, 0.82) !important;
  backdrop-filter: blur(7px);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

body > div:has(#modo-selector),
.mode-select-screen {
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
}

body > div:has(#modo-selector) > div,
.mode-select-panel,
#reto-tipo-panel,
#reto-crear-panel,
#reto-codigo-panel,
#reto-resultado-panel {
  width: min(100%, 360px) !important;
  max-width: 360px !important;
  max-height: min(88svh, 620px) !important;
  padding: 28px 14px 16px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(47, 132, 211, 0.72) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(27, 105, 255, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(4, 23, 45, 0.94), rgba(0, 8, 18, 0.96)) !important;
  color: #fff !important;
  text-align: center !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 54px rgba(0, 0, 0, 0.48),
    0 0 30px rgba(22, 112, 255, 0.12) !important;
  backdrop-filter: blur(16px);
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

body > div:has(#modo-selector) > div,
.mode-select-panel {
  animation: premiumModeIn 0.22s ease-out;
}

body > div:has(#modo-selector) h2,
.mode-select-title,
.reto-dialog-titulo {
  margin: 12px 0 6px !important;
  color: rgba(248, 252, 255, 0.98) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);
}

.mode-select-subtitle {
  position: relative;
  margin: 0 0 28px;
  color: rgba(218, 235, 255, 0.82);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.mode-select-subtitle::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 82px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(38, 171, 255, 0.9), transparent);
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(38, 171, 255, 0.65);
}

.mode-select-hero {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.42), transparent 18%),
    linear-gradient(180deg, #347aff, #0646a8);
  box-shadow:
    0 0 0 1px rgba(108, 176, 255, 0.32),
    0 0 28px rgba(14, 94, 255, 0.36);
}

.mode-select-hero::before {
  color: #dcecff;
  font-size: 31px;
  font-weight: 950;
  line-height: 1;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.34));
}

.mode-select-hero::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 8px 6px, rgba(45, 138, 255, 0.85) 0 1.5px, transparent 2px),
    radial-gradient(circle at 48px 7px, rgba(45, 138, 255, 0.62) 0 1.5px, transparent 2px),
    radial-gradient(circle at 55px 45px, rgba(45, 138, 255, 0.62) 0 1.5px, transparent 2px),
    radial-gradient(circle at 4px 48px, rgba(45, 138, 255, 0.5) 0 1.5px, transparent 2px);
  pointer-events: none;
}

.mode-select-hero-normal::before {
  content: "◎";
}

.mode-select-hero-challenge::before {
  content: "👥";
  font-size: 28px;
}

.reto-dialog-icono {
  margin: 0 auto 8px !important;
  font-size: 34px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 14px rgba(29, 155, 255, 0.34));
}

#modo-selector,
#reto-mode-selector,
#reto-tipo-botones {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100%;
  margin: 20px 0 14px !important;
}

#modo-selector .btn-tipo-reto,
#reto-tipo-botones .btn-tipo-reto,
.reto-mode-option {
  position: relative;
  width: 100% !important;
  min-height: 58px;
  padding: 10px 36px 10px 66px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(34, 95, 151, 0.78) !important;
  background:
    radial-gradient(circle at 20% 50%, rgba(37, 132, 255, 0.18), transparent 25%),
    linear-gradient(180deg, rgba(7, 29, 54, 0.9), rgba(1, 14, 30, 0.95)) !important;
  color: rgba(245, 251, 255, 0.96) !important;
  text-align: left !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

#modo-selector .btn-tipo-reto::before,
#reto-tipo-botones .btn-tipo-reto::before,
.reto-mode-option::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(34, 159, 255, 0.98), rgba(8, 72, 150, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 18px rgba(29, 155, 255, 0.34);
  transform: translateY(-50%);
}

#modo-selector .btn-tipo-reto::after,
#reto-tipo-botones .btn-tipo-reto::after {
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  color: rgba(156, 213, 255, 0.9);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-52%);
}

#modo-selector .btn-tipo-reto:hover,
#reto-tipo-botones .btn-tipo-reto:hover,
.reto-mode-option:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(126, 211, 255, 0.9) !important;
  background:
    radial-gradient(circle at 20% 50%, rgba(48, 185, 255, 0.22), transparent 25%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 44%),
    linear-gradient(180deg, rgba(15, 42, 68, 0.82), rgba(3, 14, 28, 0.84)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 14px 28px rgba(0, 0, 0, 0.3),
    0 0 22px rgba(29, 155, 255, 0.16) !important;
}

#modo-selector .btn-tipo-reto:active,
#reto-tipo-botones .btn-tipo-reto:active,
.reto-mode-option:active {
  transform: scale(0.985) !important;
}

#modo-selector .btn-tipo-icono,
#reto-tipo-botones .btn-tipo-icono {
  position: absolute;
  left: 16px;
  top: 50%;
  z-index: 1;
  width: 36px;
  height: 36px;
  color: #fff;
  font-size: 0 !important;
  font-weight: 950 !important;
  line-height: 38px;
  text-align: center;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  letter-spacing: 0;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px 25px;
}

#reto-tipo-1v1-btn .btn-tipo-icono {
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.4' r='3.2' fill='%23fff' stroke='none'/%3E%3Cpath d='M3.8 20.8c.7-4 2.5-6.1 5.2-6.1 2.4 0 4.1 1.5 4.9 4.3'/%3E%3Ccircle cx='19' cy='8.4' r='3.2' fill='%23fff' stroke='none'/%3E%3Cpath d='M24.2 20.8c-.7-4-2.5-6.1-5.2-6.1-2.4 0-4.1 1.5-4.9 4.3'/%3E%3Cpath d='M12.3 13.2h3.4'/%3E%3C/g%3E%3C/svg%3E");
}

#reto-tipo-grupo-btn .btn-tipo-icono {
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='14' cy='7.4' r='3.4'/%3E%3Ccircle cx='7.2' cy='10.2' r='2.8' opacity='.88'/%3E%3Ccircle cx='20.8' cy='10.2' r='2.8' opacity='.88'/%3E%3Cpath d='M8 22.2c.6-5 2.7-7.6 6-7.6s5.4 2.6 6 7.6H8z'/%3E%3Cpath d='M2.6 21.8c.4-3.9 2-6 4.6-6 1.5 0 2.7.7 3.5 1.9-1 1.1-1.7 2.5-2.1 4.1h-6z' opacity='.88'/%3E%3Cpath d='M19.4 21.8c-.4-1.6-1.1-3-2.1-4.1.8-1.2 2-1.9 3.5-1.9 2.6 0 4.2 2.1 4.6 6h-6z' opacity='.88'/%3E%3C/g%3E%3C/svg%3E");
}

#modo-selector .btn-tipo-reto,
#reto-tipo-botones .btn-tipo-reto {
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.16;
}

#modo-selector .btn-tipo-reto > span:not(.btn-tipo-icono),
#reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
  display: block;
  min-width: 0;
  color: rgba(248, 252, 255, 0.98);
  line-height: 1.15;
  letter-spacing: 0;
}

#modo-selector .btn-tipo-reto small,
#reto-tipo-botones .btn-tipo-reto small,
.reto-mode-option-meta {
  color: rgba(220, 239, 255, 0.7) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1.35;
  opacity: 1 !important;
  display: block;
  min-width: 0;
}

.reto-mode-option-title {
  color: rgba(248, 252, 255, 0.98);
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.15;
}

.reto-mode-option.is-active,
.reto-mode-option.active,
.reto-mode-option[aria-pressed="true"] {
  border-color: rgba(42, 166, 255, 0.98) !important;
  background:
    radial-gradient(circle at 20% 50%, rgba(46, 168, 255, 0.18), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 42%),
    linear-gradient(180deg, rgba(2, 33, 72, 0.82), rgba(0, 12, 31, 0.84)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 12px 26px rgba(0, 0, 0, 0.28),
    0 0 22px rgba(0, 132, 230, 0.2) !important;
}

.reto-mode-option.is-active::before,
.reto-mode-option.active::before,
.reto-mode-option[aria-pressed="true"]::before {
  background: linear-gradient(180deg, rgba(42, 184, 255, 0.95), rgba(0, 82, 176, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 18px rgba(0, 132, 230, 0.36);
}

#reto-crear-confirmar-btn,
#reto-codigo-buscar-btn,
#reto-codigo-jugar-btn,
#reto-resultado-cerrar-btn,
#reto-whatsapp-btn {
  min-height: 46px;
  border-radius: 9px !important;
  border: 1px solid rgba(0, 128, 229, 0.78) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 40%),
    linear-gradient(180deg, rgba(2, 33, 72, 0.96), rgba(0, 12, 31, 0.98)) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 10px 24px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(0, 132, 230, 0.18) !important;
}

#reto-crear-confirmar-btn:hover,
#reto-codigo-buscar-btn:hover,
#reto-codigo-jugar-btn:hover,
#reto-resultado-cerrar-btn:hover,
#reto-whatsapp-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(42, 166, 255, 0.98) !important;
}

#reto-tipo-cancelar-btn,
#modo-selector-cancelar-btn,
#reto-crear-cancelar-btn,
#reto-codigo-cancelar-btn {
  width: 100% !important;
  min-height: 52px;
  margin-top: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(32, 116, 225, 0.75) !important;
  background:
    linear-gradient(180deg, rgba(27, 116, 238, 0.96), rgba(4, 62, 158, 0.98)) !important;
  color: rgba(248, 252, 255, 0.98) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 22px rgba(0, 60, 150, 0.28) !important;
}

#reto-tipo-cancelar-btn:hover,
#modo-selector-cancelar-btn:hover,
#reto-crear-cancelar-btn:hover,
#reto-codigo-cancelar-btn:hover {
  color: #fff !important;
  border-color: rgba(127, 209, 255, 0.78) !important;
  transform: translateY(-1px);
}

.reto-codigo-label,
.reto-codigo-hint,
#reto-crear-estado {
  color: rgba(220, 239, 255, 0.7) !important;
}

.reto-codigo-valor,
.reto-codigo-input,
.reto-enlace-wrap,
.reto-enlace-valor,
.reto-info {
  border-color: rgba(77, 184, 255, 0.42) !important;
  background: rgba(2, 13, 26, 0.58) !important;
  color: rgba(230, 246, 255, 0.96) !important;
}

@keyframes premiumModeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 420px) {
  body > div:has(#modo-selector),
  .mode-select-screen,
  #reto-tipo-screen,
  #reto-crear-screen,
  #reto-codigo-screen,
  #reto-resultado-screen {
    padding: 14px !important;
  }

  body > div:has(#modo-selector) > div,
  .mode-select-panel,
  #reto-tipo-panel,
  #reto-crear-panel,
  #reto-codigo-panel,
  #reto-resultado-panel {
    max-width: 342px !important;
    max-height: calc(100svh - 28px) !important;
    padding: 24px 14px 16px !important;
    border-radius: 11px !important;
  }

  body > div:has(#modo-selector) h2,
  .mode-select-title,
  .reto-dialog-titulo {
    font-size: 20px !important;
  }

  .mode-select-hero {
    width: 52px;
    height: 52px;
  }

  .mode-select-subtitle {
    margin-bottom: 26px;
  }

  #modo-selector .btn-tipo-reto,
  #reto-tipo-botones .btn-tipo-reto,
  .reto-mode-option {
    min-height: 58px;
    padding: 10px 34px 10px 62px !important;
  }

  #modo-selector .btn-tipo-reto::before,
  #reto-tipo-botones .btn-tipo-reto::before,
  .reto-mode-option::before {
    left: 16px;
    width: 34px;
    height: 34px;
  }

  #modo-selector .btn-tipo-icono,
  #reto-tipo-botones .btn-tipo-icono {
    left: 16px;
    width: 34px;
    height: 34px;
    font-size: 0 !important;
    line-height: 34px;
    background-size: 23px 23px;
  }

  #modo-selector .btn-tipo-reto,
  #reto-tipo-botones .btn-tipo-reto {
    font-size: 14px !important;
  }

  #modo-selector .btn-tipo-reto small,
  #reto-tipo-botones .btn-tipo-reto small,
  .reto-mode-option-meta {
    font-size: 11.5px !important;
  }
}

/* ===== GAMEPLAY PREMIUM SPORT FINAL ===== */

#barra-superior {
  left: 50%;
  top: 10px;
  width: min(calc(100% - 28px), 760px);
  min-height: 72px;
  padding: 10px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(80, 184, 255, 0.42);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(7, 28, 48, 0.8), rgba(2, 9, 20, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 42px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(37, 157, 255, 0.12);
  backdrop-filter: blur(15px);
  box-sizing: border-box;
}

#barra-superior .barra-izquierda,
#barra-superior .barra-derecha {
  min-width: 0;
  background: transparent !important;
  color: rgba(244, 250, 255, 0.96) !important;
  padding: 0 !important;
}

#barra-superior .barra-izquierda {
  width: min(42%, 265px);
  gap: 7px;
}

#barra-superior .barra-derecha {
  width: min(36%, 245px);
  justify-content: flex-end;
  gap: 9px;
}

#barra-superior .player-info {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

#barra-superior .jugador-nombre,
#barra-superior .player-name {
  max-width: 100%;
  overflow: hidden;
  color: rgba(248, 252, 255, 0.98);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

#barra-superior .nivel-bar-wrap {
  gap: 7px;
  width: 100%;
  margin: 0;
}

#barra-superior .nivel-label,
#barra-superior .nivel-percent,
#barra-superior .nivel-texto,
#barra-superior .puntos-nivel {
  color: rgba(221, 240, 255, 0.78);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

#barra-superior .nivel-bar {
  flex: 1;
  width: auto;
  min-width: 54px;
  height: 6px;
  border: 1px solid rgba(102, 194, 255, 0.3);
  background: rgba(124, 197, 255, 0.13);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.34);
}

#barra-superior .nivel-fill {
  background: linear-gradient(90deg, #2fb5ff, #87dcff);
  box-shadow: 0 0 12px rgba(47, 181, 255, 0.48);
}

#barra-superior .vidas-info {
  color: #8fd3ff;
  font-size: 13px;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(47, 181, 255, 0.3);
}

#exit-game-btn {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(143, 211, 255, 0.4);
  border-radius: 999px;
  background: rgba(3, 16, 31, 0.42);
  color: rgba(235, 248, 255, 0.88);
  font-size: 11px;
  font-weight: 850;
  box-shadow: none;
}

#exit-game-btn:hover {
  border-color: rgba(143, 211, 255, 0.82);
  background: rgba(16, 63, 103, 0.54);
  box-shadow: 0 0 16px rgba(47, 181, 255, 0.18);
}

#quiz-screen {
  min-height: 100svh;
  padding: 104px 14px 26px;
  align-items: center;
  box-sizing: border-box;
}

#game-panel {
  width: min(100%, 700px);
  max-width: 700px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(80, 184, 255, 0.48);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 181, 255, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(6, 27, 47, 0.82), rgba(1, 8, 18, 0.82));
  color: #f4fbff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 26px 62px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(37, 157, 255, 0.13);
  backdrop-filter: blur(16px);
  box-sizing: border-box;
}

#question-container {
  margin: 0 0 18px;
  padding: 18px clamp(16px, 3vw, 26px) 20px;
  border: 1px solid rgba(80, 184, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(4, 19, 35, 0.58), rgba(1, 8, 18, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: left;
}

#question-container .badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

#categoria-badge,
#dificultad-badge,
.dificultad-badge,
.categoria-badge {
  min-height: 25px;
  padding: 6px 10px;
  border: 1px solid rgba(92, 196, 255, 0.34);
  border-radius: 999px;
  background: rgba(8, 39, 67, 0.62);
  color: #55bdff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 0 13px rgba(47, 181, 255, 0.12);
}

#question {
  padding: 0;
  color: rgba(248, 252, 255, 0.98);
  font-size: clamp(20px, 2.8vw, 27px);
  font-weight: 850;
  line-height: 1.34;
  letter-spacing: 0;
  text-align: left;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.48);
}

#question-image-wrap {
  margin: 16px auto 0;
  border: 1px solid rgba(92, 196, 255, 0.34);
  border-radius: 16px;
  background: rgba(1, 8, 18, 0.72);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

#answers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.answer-btn {
  min-height: clamp(82px, 12vw, 106px);
  padding: 18px 16px;
  border-radius: 15px;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    filter 0.14s ease;
  box-sizing: border-box;
}

.answer-btn:nth-child(1),
.answer-btn:nth-child(4) {
  border: 1.5px solid rgba(84, 170, 225, 0.82);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 240, 244, 0.96));
  color: #111820;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 9px 20px rgba(0, 0, 0, 0.26);
}

.answer-btn:nth-child(2),
.answer-btn:nth-child(3) {
  border: 1.5px solid rgba(112, 205, 255, 0.78);
  background:
    radial-gradient(circle at 50% 0%, rgba(88, 194, 255, 0.28), transparent 46%),
    linear-gradient(180deg, #0874df, #0349ad);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 9px 22px rgba(0, 58, 139, 0.32),
    0 0 16px rgba(41, 169, 255, 0.14);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
}

.answer-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.answer-btn:nth-child(1):hover:not(:disabled),
.answer-btn:nth-child(4):hover:not(:disabled) {
  border-color: rgba(114, 200, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 12px 24px rgba(0, 0, 0, 0.3),
    0 0 16px rgba(47, 181, 255, 0.12);
}

.answer-btn:nth-child(2):hover:not(:disabled),
.answer-btn:nth-child(3):hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 25px rgba(0, 58, 139, 0.36),
    0 0 20px rgba(41, 169, 255, 0.2);
}

.answer-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

.answer-btn.selected {
  transform: translateY(-1px) scale(1.01);
  outline: 2px solid rgba(255, 186, 73, 0.76);
  outline-offset: 2px;
  filter: brightness(1.04);
}

.answer-btn.correct {
  border-color: rgba(76, 217, 128, 0.95) !important;
  background: linear-gradient(180deg, #2ecc71, #119447) !important;
  color: #fff !important;
  box-shadow: 0 0 22px rgba(46, 204, 113, 0.28) !important;
}

.answer-btn.wrong {
  border-color: rgba(255, 100, 120, 0.92) !important;
  background: linear-gradient(180deg, #e94d5f, #9f172b) !important;
  color: #fff !important;
  box-shadow: 0 0 22px rgba(233, 77, 95, 0.24) !important;
}

#controls {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

#comodin-saltar,
#comodin-5050 {
  position: relative;
  min-height: 48px;
  min-width: 148px;
  padding: 0 18px 0 46px;
  border: 1px solid rgba(80, 184, 255, 0.32);
  border-radius: 999px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), transparent 44%),
    rgba(3, 16, 31, 0.56);
  color: rgba(241, 249, 255, 0.92);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 9px 20px rgba(0, 0, 0, 0.28);
}

#comodin-saltar::before,
#comodin-5050::before {
  position: absolute;
  left: 17px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: #8fd3ff;
  font-size: 18px;
  line-height: 18px;
}

#comodin-saltar::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #8fd3ff;
}

#comodin-5050::before {
  content: "50";
  font-size: 12px;
  font-weight: 950;
  text-align: center;
}

#comodin-saltar:hover,
#comodin-5050:hover {
  border-color: rgba(127, 211, 255, 0.74);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), transparent 44%),
    rgba(9, 42, 72, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 11px 24px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(47, 181, 255, 0.14);
  transform: translateY(-1px);
}

#comodin-saltar:active,
#comodin-5050:active {
  transform: scale(0.98);
}

#next-btn {
  min-height: 48px;
  border: 1px solid rgba(0, 128, 229, 0.78);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(2, 33, 72, 0.96), rgba(0, 12, 31, 0.98));
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0, 132, 230, 0.22);
}

#timer-bar-wrap {
  --timer-pct: 1;
  position: fixed;
  left: 50%;
  top: 8px;
  z-index: 1002;
  width: 74px;
  height: 74px;
  padding: 4px;
  border-radius: 50%;
  background:
    conic-gradient(#38b8ff calc(var(--timer-pct) * 1turn), rgba(111, 180, 226, 0.18) 0);
  box-shadow:
    inset 0 0 0 1px rgba(155, 221, 255, 0.22),
    0 0 20px rgba(47, 181, 255, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.36);
  transform: translateX(-50%);
  box-sizing: border-box;
}

#timer-bar-wrap::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%, rgba(70, 184, 255, 0.18), transparent 52%),
    rgba(3, 16, 31, 0.95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

#timer-seconds-label {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  z-index: 1;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 21px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
}

#timer-bar {
  display: none;
}

@media (max-width: 620px) {
  #barra-superior {
    top: 8px;
    width: calc(100% - 18px);
    min-height: 68px;
    padding: 9px 10px;
    border-radius: 18px;
  }

  #barra-superior .barra-izquierda {
    width: calc(50% - 44px);
  }

  #barra-superior .barra-derecha {
    width: calc(50% - 44px);
    gap: 6px;
  }

  #barra-superior .jugador-nombre,
  #barra-superior .player-name,
  #barra-superior .nivel-texto,
  #barra-superior .puntos-nivel,
  #barra-superior .vidas-info {
    font-size: 10px;
  }

  #barra-superior .nivel-label,
  #barra-superior .nivel-percent {
    display: none;
  }

  #exit-game-btn {
    min-height: 30px;
    padding: 0 9px;
    font-size: 10px;
  }

  #timer-bar-wrap {
    top: 10px;
    width: 62px;
    height: 62px;
  }

  #timer-bar-wrap::before {
    inset: 7px;
  }

  #timer-seconds-label {
    font-size: 18px;
  }

  #quiz-screen {
    padding: 92px 10px 18px;
  }

  #game-panel {
    padding: 15px;
    border-radius: 20px;
  }

  #question-container {
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 16px;
  }

  #answers-grid {
    gap: 10px;
  }

  .answer-btn {
    min-height: 74px;
    padding: 12px 8px;
    border-radius: 13px;
    font-size: clamp(15px, 4.6vw, 20px);
  }

  #controls {
    gap: 10px;
    margin-top: 16px;
  }

  #comodin-saltar,
  #comodin-5050 {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px 0 38px;
    font-size: 12px;
  }

  #comodin-saltar::before,
  #comodin-5050::before {
    left: 13px;
  }
}

/* ===== GAMEPLAY PROFESSIONAL COMPACT SCALE ===== */
body:has(#quiz-screen:not(.hidden))::before {
  background:
    radial-gradient(circle at 50% 40%, transparent 0 38%, rgba(0, 0, 0, 0.12) 62%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(180deg, rgba(0, 8, 18, 0.26), rgba(0, 6, 15, 0.54)) !important;
  backdrop-filter: blur(0.8px) !important;
}

#barra-superior {
  width: min(calc(100% - 28px), 620px) !important;
  min-height: 72px !important;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 9px 12px !important;
  border-radius: 22px 22px 0 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 16px 38px rgba(0, 0, 0, 0.42),
    0 0 20px rgba(41, 169, 255, 0.1) !important;
}

#barra-superior .barra-izquierda {
  grid-template-columns: 52px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  row-gap: 4px !important;
}

#gameplay-crest {
  width: 50px !important;
  height: 50px !important;
  filter:
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 10px rgba(74, 187, 255, 0.16)) !important;
}

#barra-superior .nivel-texto {
  font-size: 11px !important;
  font-weight: 850 !important;
}

#barra-superior .nivel-bar-wrap {
  width: 92px !important;
}

#barra-superior .nivel-bar {
  height: 5px !important;
  box-shadow: 0 0 8px rgba(58, 174, 255, 0.22) !important;
}

#timer-bar-wrap {
  width: 52px !important;
  height: 52px !important;
  padding: 4px !important;
  box-shadow:
    inset 0 0 0 1px rgba(149, 219, 255, 0.2),
    0 0 13px rgba(41, 169, 255, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.32) !important;
}

#timer-bar-wrap::before {
  inset: 7px !important;
}

#timer-seconds-label {
  font-size: 17px !important;
  font-weight: 850 !important;
}

#barra-superior .barra-derecha {
  gap: 6px 7px !important;
}

#controls {
  gap: 5px !important;
}

#comodin-5050,
#comodin-saltar,
#exit-game-btn {
  height: 29px !important;
  min-height: 29px !important;
}

#comodin-5050 {
  padding: 0 9px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
}

#comodin-saltar,
#exit-game-btn {
  width: 29px !important;
}

#barra-superior .vidas-info,
#barra-superior .puntos-nivel {
  font-size: 9.5px !important;
  font-weight: 750 !important;
}

#quiz-screen {
  padding: 89px 14px 18px !important;
}

#game-panel {
  width: min(calc(100vw - 28px), 620px) !important;
  max-width: 620px !important;
  padding: 14px 16px 16px !important;
  border-radius: 0 0 22px 22px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(43, 162, 242, 0.08), transparent 48%),
    linear-gradient(180deg, rgba(4, 20, 39, 0.84), rgba(1, 8, 19, 0.82)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 20px 48px rgba(0, 0, 0, 0.46),
    0 0 20px rgba(41, 169, 255, 0.08) !important;
}

#question-container {
  margin: 0 0 12px !important;
  padding: 0 4px 3px !important;
}

#question-container .badges-row {
  margin: 0 0 8px !important;
}

#categoria-badge,
#dificultad-badge,
.categoria-badge,
.dificultad-badge {
  font-size: 12px !important;
  font-weight: 800 !important;
}

#question {
  max-width: 500px !important;
  font-size: clamp(16px, 1.95vw, 22px) !important;
  font-weight: 750 !important;
  line-height: 1.24 !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5) !important;
}

#answers-grid {
  gap: 9px 11px !important;
}

.answer-btn {
  min-height: clamp(66px, 8vw, 88px) !important;
  height: auto !important;
  padding: clamp(10px, 1.5vw, 14px) clamp(12px, 1.8vw, 18px) !important;
  border-radius: 12px !important;
  font-size: clamp(13px, 1.35vw, 16px) !important;
  font-weight: 750 !important;
  line-height: 1.24 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto !important;
  text-wrap: pretty;
}

.answer-btn:nth-child(1),
.answer-btn:nth-child(4) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 6px 14px rgba(0, 0, 0, 0.2) !important;
}

.answer-btn:nth-child(2),
.answer-btn:nth-child(3) {
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 203, 255, 0.18), transparent 50%),
    linear-gradient(180deg, #076bc8, #03449f) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 7px 16px rgba(0, 59, 144, 0.25),
    0 0 8px rgba(41, 169, 255, 0.08) !important;
}

@media (max-width: 620px) {
  #barra-superior {
    top: 9px !important;
    width: calc(100% - 16px) !important;
    min-height: 68px !important;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 8px 8px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  #barra-superior .barra-izquierda {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 7px !important;
  }

  #gameplay-crest {
    width: 36px !important;
    height: 36px !important;
  }

  #barra-superior .nivel-texto {
    font-size: 10px !important;
  }

  #barra-superior .nivel-bar-wrap {
    width: 58px !important;
  }

  #timer-bar-wrap {
    width: 46px !important;
    height: 46px !important;
  }

  #timer-bar-wrap::before {
    inset: 6px !important;
  }

  #timer-seconds-label {
    font-size: 15px !important;
  }

  #comodin-5050,
  #comodin-saltar,
  #exit-game-btn {
    height: 27px !important;
    min-height: 27px !important;
  }

  #comodin-5050 {
    padding: 0 7px !important;
    font-size: 9px !important;
  }

  #comodin-saltar,
  #exit-game-btn {
    width: 27px !important;
  }

  #barra-superior .vidas-info,
  #barra-superior .puntos-nivel {
    font-size: 8.5px !important;
  }

  #quiz-screen {
    padding: 77px 8px 14px !important;
  }

  #game-panel {
    width: calc(100vw - 16px) !important;
    padding: 12px 10px 12px !important;
    border-radius: 0 0 18px 18px !important;
  }

  #question-container {
    margin-bottom: 10px !important;
  }

  #question-container .badges-row {
    margin-bottom: 6px !important;
  }

  #categoria-badge,
  #dificultad-badge,
  .categoria-badge,
  .dificultad-badge {
    font-size: 11px !important;
  }

  #question {
    max-width: 92% !important;
    font-size: clamp(15px, 4.1vw, 18px) !important;
    line-height: 1.22 !important;
  }

  #answers-grid {
    gap: 7px !important;
  }

  .answer-btn {
    min-height: 62px !important;
    height: auto !important;
    padding: 9px 8px !important;
    border-radius: 10px !important;
    font-size: clamp(12px, 3.35vw, 14px) !important;
    font-weight: 750 !important;
    line-height: 1.22 !important;
  }
}

@media (max-width: 380px) {
  .answer-btn {
    min-height: 58px !important;
    padding: 8px 7px !important;
    font-size: clamp(11.5px, 3.25vw, 13px) !important;
    line-height: 1.2 !important;
  }
}

/* Gameplay category is kept in state, but hidden from the question UI. */
html body.gameplay-active #categoria-badge,
html body.gameplay-active .categoria-badge {
  display: none !important;
}

html body.gameplay-active #categoria-badge,
html body.gameplay-active .categoria-badge {
  display: none !important;
}

/* FINAL FINAL layout engine: real vertical flow, must be last. */
body:has(#quiz-screen:not(.hidden)) #barra-superior {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: min(calc(100% - 20px), 620px) !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 10px auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda,
body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-derecha {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda {
  justify-content: flex-start !important;
  gap: 8px !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-derecha {
  justify-content: flex-end !important;
  gap: 8px !important;
}

body:has(#quiz-screen:not(.hidden)) #gameplay-crest {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 auto !important;
}

body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  transform: none !important;
}

body:has(#quiz-screen:not(.hidden)) #timer-seconds-label {
  font-size: 14px !important;
}

body:has(#quiz-screen:not(.hidden)) #quiz-screen {
  min-height: calc(100svh - 74px) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 10px 12px !important;
  overflow: visible !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel {
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 auto !important;
  padding: 12px 12px 14px !important;
  overflow: visible !important;
}

body:has(#quiz-screen:not(.hidden)) #question-container {
  margin: 0 !important;
  padding: 0 4px !important;
}

body:has(#quiz-screen:not(.hidden)) #question {
  max-width: 500px !important;
  font-size: clamp(15px, 1.8vw, 20px) !important;
  line-height: 1.22 !important;
}

body:has(#quiz-screen:not(.hidden)) #answers-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}

body:has(#quiz-screen:not(.hidden)) .answer-btn {
  min-height: 58px !important;
  height: auto !important;
  padding: 8px 10px !important;
  font-size: clamp(12px, 1.3vw, 15px) !important;
  line-height: 1.22 !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel #controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-5050,
body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-saltar {
  width: auto !important;
  min-width: 74px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
}

@media (max-width: 620px) {
  body:has(#quiz-screen:not(.hidden)) #barra-superior {
    width: calc(100% - 14px) !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin-top: 7px !important;
    padding: 7px !important;
    gap: 6px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #gameplay-crest {
    width: 34px !important;
    height: 34px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #quiz-screen {
    min-height: calc(100svh - 65px) !important;
    padding: 0 7px 10px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #game-panel {
    gap: 8px !important;
    padding: 10px 9px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #question {
    font-size: clamp(13px, 3.7vw, 17px) !important;
  }

  body:has(#quiz-screen:not(.hidden)) .answer-btn {
    min-height: 54px !important;
    padding: 7px 6px !important;
    font-size: clamp(11.5px, 3.1vw, 13.5px) !important;
  }
}

/* FINAL gameplay layout engine: must remain last. */
body:has(#quiz-screen:not(.hidden)) #barra-superior {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  width: min(calc(100% - 20px), 620px) !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 10px auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  border-radius: 18px 18px 0 0 !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda,
body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-derecha {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda {
  justify-content: flex-start !important;
  gap: 8px !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-derecha {
  justify-content: flex-end !important;
  gap: 8px !important;
}

body:has(#quiz-screen:not(.hidden)) #gameplay-crest {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 auto !important;
}

body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  transform: none !important;
}

body:has(#quiz-screen:not(.hidden)) #timer-seconds-label {
  font-size: 14px !important;
}

body:has(#quiz-screen:not(.hidden)) #quiz-screen {
  min-height: calc(100svh - 74px) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 10px 12px !important;
  overflow: visible !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel {
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 auto !important;
  padding: 12px 12px 14px !important;
  border-radius: 0 0 18px 18px !important;
  overflow: visible !important;
}

body:has(#quiz-screen:not(.hidden)) #question-container {
  margin: 0 !important;
  padding: 0 4px !important;
}

body:has(#quiz-screen:not(.hidden)) #question {
  max-width: 500px !important;
  font-size: clamp(15px, 1.8vw, 20px) !important;
  line-height: 1.22 !important;
}

body:has(#quiz-screen:not(.hidden)) #answers-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}

body:has(#quiz-screen:not(.hidden)) .answer-btn {
  min-height: 58px !important;
  height: auto !important;
  padding: 8px 10px !important;
  font-size: clamp(12px, 1.3vw, 15px) !important;
  line-height: 1.22 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel #controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-5050,
body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-saltar {
  width: auto !important;
  min-width: 74px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
}

@media (max-width: 620px) {
  body:has(#quiz-screen:not(.hidden)) #barra-superior {
    width: calc(100% - 14px) !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin-top: 7px !important;
    padding: 7px !important;
    gap: 6px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #gameplay-crest {
    width: 34px !important;
    height: 34px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #timer-seconds-label {
    font-size: 12px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #quiz-screen {
    min-height: calc(100svh - 65px) !important;
    padding: 0 7px 10px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #game-panel {
    width: 100% !important;
    gap: 8px !important;
    padding: 10px 9px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #question {
    font-size: clamp(13px, 3.7vw, 17px) !important;
  }

  body:has(#quiz-screen:not(.hidden)) .answer-btn {
    min-height: 54px !important;
    padding: 7px 6px !important;
    font-size: clamp(11.5px, 3.1vw, 13.5px) !important;
  }
}

/* ===== GAMEPLAY LAYOUT ENGINE RESET ===== */
body:has(#quiz-screen:not(.hidden)) #barra-superior {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: min(calc(100% - 20px), 620px) !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 10px auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  border-radius: 18px 18px 0 0 !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda,
body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-derecha {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda {
  justify-content: flex-start !important;
  gap: 8px !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-derecha {
  justify-content: flex-end !important;
  gap: 8px !important;
}

body:has(#quiz-screen:not(.hidden)) #gameplay-crest {
  flex: 0 0 auto !important;
  width: 42px !important;
  height: 42px !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .player-info {
  flex: 0 1 88px !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-texto {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  color: rgba(235, 247, 255, 0.82) !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-bar-wrap {
  width: 72px !important;
}

body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 4px !important;
  margin: 0 !important;
  transform: none !important;
}

body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap::before {
  inset: 6px !important;
}

body:has(#quiz-screen:not(.hidden)) #timer-seconds-label {
  font-size: 14px !important;
  font-weight: 850 !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .vidas-info,
body:has(#quiz-screen:not(.hidden)) #barra-superior .puntos-nivel {
  flex: 0 0 auto !important;
  color: rgba(226, 242, 255, 0.84) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body:has(#quiz-screen:not(.hidden)) #exit-game-btn {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
}

body:has(#quiz-screen:not(.hidden)) #quiz-screen {
  min-height: calc(100svh - 74px) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 10px 12px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel {
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  flex: 0 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 auto !important;
  padding: 12px 12px 14px !important;
  border-radius: 0 0 18px 18px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body:has(#quiz-screen:not(.hidden)) #question-container {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 4px !important;
}

body:has(#quiz-screen:not(.hidden)) #question-container .badges-row {
  margin: 0 0 6px !important;
}

body:has(#quiz-screen:not(.hidden)) #question {
  max-width: 500px !important;
  margin: 0 auto !important;
  font-size: clamp(15px, 1.8vw, 20px) !important;
  line-height: 1.22 !important;
}

body:has(#quiz-screen:not(.hidden)) #answers-grid {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
}

body:has(#quiz-screen:not(.hidden)) .answer-btn {
  min-height: 58px !important;
  height: auto !important;
  padding: 8px 10px !important;
  font-size: clamp(12px, 1.3vw, 15px) !important;
  line-height: 1.22 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel #controls {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 2px 0 0 !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-5050,
body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-saltar {
  width: auto !important;
  min-width: 74px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-saltar {
  font-size: 11px !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-saltar::before {
  content: none !important;
}

@media (max-width: 620px) {
  body:has(#quiz-screen:not(.hidden)) #barra-superior {
    width: calc(100% - 14px) !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin-top: 7px !important;
    padding: 7px 7px !important;
    gap: 6px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #gameplay-crest {
    width: 34px !important;
    height: 34px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .player-info {
    flex-basis: 54px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-texto,
  body:has(#quiz-screen:not(.hidden)) #barra-superior .puntos-nivel,
  body:has(#quiz-screen:not(.hidden)) #barra-superior .vidas-info {
    font-size: 8.5px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-bar-wrap {
    width: 48px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #timer-seconds-label {
    font-size: 12px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #exit-game-btn {
    flex-basis: 25px !important;
    width: 25px !important;
    height: 25px !important;
    min-height: 25px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #quiz-screen {
    min-height: calc(100svh - 65px) !important;
    padding: 0 7px 10px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #game-panel {
    width: 100% !important;
    gap: 8px !important;
    padding: 10px 9px 10px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #question {
    font-size: clamp(13px, 3.7vw, 17px) !important;
    line-height: 1.2 !important;
  }

  body:has(#quiz-screen:not(.hidden)) #answers-grid {
    gap: 7px !important;
  }

  body:has(#quiz-screen:not(.hidden)) .answer-btn {
    min-height: 54px !important;
    padding: 7px 6px !important;
    font-size: clamp(11.5px, 3.1vw, 13.5px) !important;
  }
}

@media (max-width: 360px) {
  #answers-grid {
    gap: 8px;
  }

  .answer-btn {
    min-height: 68px;
    font-size: 14px;
  }

  #comodin-saltar,
  #comodin-5050 {
    font-size: 11px;
  }
}

/* Gameplay force layer: garantiza que el rediseño gane a CSS legacy/cacheado. */
#barra-superior {
  left: 50% !important;
  top: 10px !important;
  width: min(calc(100% - 28px), 760px) !important;
  min-height: 72px !important;
  padding: 10px 14px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(80, 184, 255, 0.42) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(7, 28, 48, 0.86), rgba(2, 9, 20, 0.82)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 42px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(37, 157, 255, 0.12) !important;
  backdrop-filter: blur(15px) !important;
}

#quiz-screen {
  padding: 104px 14px 26px !important;
  min-height: 100svh !important;
}

#game-panel {
  width: min(100%, 700px) !important;
  max-width: 700px !important;
  padding: clamp(18px, 3vw, 28px) !important;
  border: 1px solid rgba(80, 184, 255, 0.48) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 181, 255, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(6, 27, 47, 0.86), rgba(1, 8, 18, 0.86)) !important;
  color: #f4fbff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 26px 62px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(37, 157, 255, 0.13) !important;
  backdrop-filter: blur(16px) !important;
}

#question-container {
  margin: 0 0 18px !important;
  padding: 18px clamp(16px, 3vw, 26px) 20px !important;
  border: 1px solid rgba(80, 184, 255, 0.2) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(4, 19, 35, 0.62), rgba(1, 8, 18, 0.32)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  text-align: left !important;
}

#question {
  padding: 0 !important;
  color: rgba(248, 252, 255, 0.98) !important;
  font-size: clamp(20px, 2.8vw, 27px) !important;
  font-weight: 850 !important;
  line-height: 1.34 !important;
  text-align: left !important;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.48) !important;
}

#answers-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}

.answer-btn {
  min-height: clamp(82px, 12vw, 106px) !important;
  padding: 18px 16px !important;
  border-radius: 15px !important;
  font-size: clamp(18px, 2.6vw, 26px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.answer-btn:nth-child(1),
.answer-btn:nth-child(4) {
  border: 1.5px solid rgba(84, 170, 225, 0.82) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 240, 244, 0.96)) !important;
  color: #111820 !important;
}

.answer-btn:nth-child(2),
.answer-btn:nth-child(3) {
  border: 1.5px solid rgba(112, 205, 255, 0.78) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(88, 194, 255, 0.28), transparent 46%),
    linear-gradient(180deg, #0874df, #0349ad) !important;
  color: #fff !important;
}

#timer-bar-wrap {
  --timer-pct: 1;
  position: fixed !important;
  left: 50% !important;
  top: 8px !important;
  bottom: auto !important;
  z-index: 1002 !important;
  width: 74px !important;
  height: 74px !important;
  padding: 4px !important;
  border-radius: 50% !important;
  background: conic-gradient(#38b8ff calc(var(--timer-pct) * 1turn), rgba(111, 180, 226, 0.18) 0) !important;
  transform: translateX(-50%) !important;
}

#timer-seconds-label {
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  background: transparent !important;
  font-size: 21px !important;
}

#timer-bar {
  display: none !important;
}

/* ===== GAMEPLAY OPTION 2 REAL LAYOUT ===== */
body:has(#quiz-screen:not(.hidden))::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 38%, transparent 0 34%, rgba(0, 0, 0, 0.14) 58%, rgba(0, 0, 0, 0.46) 100%),
    linear-gradient(180deg, rgba(0, 8, 18, 0.3), rgba(0, 6, 15, 0.58));
  backdrop-filter: blur(1.1px);
}

#barra-superior {
  top: 18px !important;
  left: 50% !important;
  width: min(calc(100% - 28px), 680px) !important;
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(104, 198, 255, 0.58) !important;
  border-radius: 28px 28px 0 0 !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(61, 186, 255, 0.28), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 36%),
    linear-gradient(180deg, rgba(5, 26, 48, 0.9), rgba(1, 8, 20, 0.9)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 22px 58px rgba(0, 0, 0, 0.52),
    0 0 34px rgba(41, 169, 255, 0.18) !important;
  transform: translateX(-50%) !important;
  backdrop-filter: blur(18px) !important;
}

#barra-superior .barra-izquierda {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 13px !important;
  row-gap: 6px !important;
  align-items: center !important;
  min-width: 0 !important;
  background: transparent !important;
}

#gameplay-crest {
  grid-row: 1 / 3;
  width: 66px;
  height: 66px;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 14px rgba(74, 187, 255, 0.22));
}

#barra-superior .player-info {
  min-width: 0;
  padding: 0 !important;
  background: transparent !important;
}

#barra-superior .jugador-nombre {
  display: none !important;
}

#barra-superior .nivel-texto {
  grid-column: 2;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-transform: uppercase;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
}

#barra-superior .nivel-bar-wrap {
  width: 120px !important;
  max-width: 100%;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  margin: 0 !important;
}

#barra-superior .nivel-label,
#barra-superior .nivel-percent {
  display: none !important;
}

#barra-superior .nivel-bar {
  grid-column: 1 / -1;
  width: 100% !important;
  height: 8px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, #3aaeff 0 24%, transparent 24% 28%, #3aaeff 28% 52%, transparent 52% 56%, #3aaeff 56% 80%, transparent 80% 84%, rgba(84, 152, 201, 0.28) 84% 100%) !important;
  box-shadow: 0 0 14px rgba(58, 174, 255, 0.32) !important;
}

#barra-superior .nivel-fill {
  display: none !important;
}

#timer-bar-wrap {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  width: 66px !important;
  height: 66px !important;
  justify-self: center !important;
  padding: 5px !important;
  border-radius: 50% !important;
  background:
    repeating-conic-gradient(#43b9ff 0 4deg, transparent 4deg 8deg),
    conic-gradient(#1586e6 calc(var(--timer-pct, 1) * 1turn), rgba(76, 149, 207, 0.17) 0) !important;
  box-shadow:
    inset 0 0 0 1px rgba(149, 219, 255, 0.24),
    0 0 17px rgba(41, 169, 255, 0.24),
    0 10px 24px rgba(0, 0, 0, 0.38) !important;
  transform: none !important;
}

#timer-bar-wrap::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%, rgba(80, 190, 255, 0.2), transparent 54%),
    #03111f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

#timer-seconds-label {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 1 !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  transform: translate(-50%, -50%) !important;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.62) !important;
}

#timer-bar {
  display: none !important;
}

#barra-superior .barra-derecha {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: auto auto 38px !important;
  grid-template-rows: auto auto !important;
  gap: 8px 10px !important;
  align-items: center !important;
  justify-items: end !important;
  background: transparent !important;
}

#controls {
  grid-column: 1 / 3;
  grid-row: 1;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
}

#comodin-5050,
#comodin-saltar {
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(142, 213, 255, 0.4) !important;
  border-radius: 999px !important;
  background: rgba(3, 16, 31, 0.42) !important;
  color: rgba(241, 249, 255, 0.96) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

#comodin-saltar {
  width: 34px !important;
  padding: 0 !important;
  font-size: 0 !important;
}

#comodin-saltar::before {
  content: "" !important;
  position: static !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 7px solid transparent !important;
  border-bottom: 7px solid transparent !important;
  border-left: 12px solid #fff !important;
  transform: none !important;
}

#comodin-5050::before {
  content: none !important;
}

#barra-superior .vidas-info {
  grid-column: 1;
  grid-row: 2;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  color: rgba(219, 240, 255, 0.86) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#barra-superior .puntos-nivel {
  grid-column: 2;
  grid-row: 2;
  color: rgba(219, 240, 255, 0.86) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#exit-game-btn {
  grid-column: 3;
  grid-row: 1 / 3;
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid rgba(142, 213, 255, 0.42) !important;
  border-radius: 12px !important;
  background: rgba(3, 16, 31, 0.42) !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

#exit-game-btn::before {
  content: "";
  display: block;
  width: 18px;
  height: 14px;
  margin: 0 auto;
  background:
    linear-gradient(#fff 0 0) 0 0 / 18px 2px no-repeat,
    linear-gradient(#fff 0 0) 0 6px / 18px 2px no-repeat,
    linear-gradient(#fff 0 0) 0 12px / 18px 2px no-repeat;
}

#quiz-screen {
  min-height: 100svh !important;
  align-items: flex-start !important;
  padding: 112px 14px 22px !important;
}

#game-panel {
  width: min(calc(100vw - 28px), 680px) !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 18px 22px 22px !important;
  border: 1px solid rgba(104, 198, 255, 0.42) !important;
  border-top: 0 !important;
  border-radius: 0 0 28px 28px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(43, 162, 242, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(4, 20, 39, 0.86), rgba(1, 8, 19, 0.84)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 66px rgba(0, 0, 0, 0.52),
    0 0 34px rgba(41, 169, 255, 0.13) !important;
  backdrop-filter: blur(18px) !important;
}

#question-container {
  margin: 0 0 18px !important;
  padding: 2px 8px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

#question-container .badges-row {
  justify-content: flex-start !important;
  margin: 0 0 12px !important;
}

#categoria-badge,
#dificultad-badge,
.categoria-badge,
.dificultad-badge {
  border: 0 !important;
  background: transparent !important;
  color: #39aeff !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

#question {
  max-width: 590px !important;
  margin: 0 auto !important;
  color: rgba(248, 252, 255, 0.98) !important;
  font-size: clamp(20px, 2.45vw, 28px) !important;
  font-weight: 850 !important;
  line-height: 1.28 !important;
  text-align: center !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.58) !important;
}

#answers-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 14px !important;
}

.answer-btn {
  min-height: clamp(78px, 9.5vw, 104px) !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  font-size: clamp(18px, 2.35vw, 26px) !important;
  font-weight: 950 !important;
  line-height: 1.14 !important;
  transform: translateZ(0);
}

.answer-btn:nth-child(1),
.answer-btn:nth-child(4) {
  border: 1.5px solid rgba(112, 205, 255, 0.9) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(244, 247, 250, 0.98)) !important;
  color: #111820 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 8px 18px rgba(0, 0, 0, 0.24) !important;
}

.answer-btn:nth-child(2),
.answer-btn:nth-child(3) {
  border: 1.5px solid rgba(126, 211, 255, 0.9) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(99, 203, 255, 0.24), transparent 48%),
    linear-gradient(180deg, #0872d6, #0347a8) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 9px 21px rgba(0, 59, 144, 0.3),
    0 0 12px rgba(41, 169, 255, 0.11) !important;
}

.answer-btn:hover:not(:disabled) {
  transform: translateY(-3px) !important;
  filter: brightness(1.04);
}

.answer-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.985) !important;
}

@media (max-width: 620px) {
  #barra-superior {
    top: 10px !important;
    width: calc(100% - 18px) !important;
    min-height: 82px !important;
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 11px 10px !important;
    border-radius: 22px 22px 0 0 !important;
  }

  #barra-superior .barra-izquierda {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }

  #gameplay-crest {
    width: 44px;
    height: 44px;
  }

  #barra-superior .nivel-texto {
    font-size: 13px !important;
  }

  #barra-superior .nivel-bar-wrap {
    width: 76px !important;
  }

  #timer-bar-wrap {
    width: 54px !important;
    height: 54px !important;
  }

  #timer-seconds-label {
    font-size: 18px !important;
  }

  #barra-superior .barra-derecha {
    grid-template-columns: auto auto 32px !important;
    gap: 7px !important;
  }

  #controls {
    gap: 5px !important;
  }

  #comodin-5050,
  #comodin-saltar,
  #exit-game-btn {
    height: 32px !important;
    min-height: 32px !important;
  }

  #comodin-5050 {
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  #comodin-saltar,
  #exit-game-btn {
    width: 32px !important;
  }

  #barra-superior .vidas-info,
  #barra-superior .puntos-nivel {
    font-size: 10px !important;
  }

  #quiz-screen {
    padding: 94px 9px 16px !important;
  }

  #game-panel {
    width: calc(100vw - 18px) !important;
    padding: 15px 13px 16px !important;
    border-radius: 0 0 22px 22px !important;
  }

  #categoria-badge,
  #dificultad-badge,
  .categoria-badge,
  .dificultad-badge {
    font-size: 15px !important;
  }

  #question {
    font-size: clamp(18px, 5vw, 23px) !important;
  }

  #answers-grid {
    gap: 10px !important;
  }

  .answer-btn {
    min-height: 68px !important;
    padding: 11px 8px !important;
    border-radius: 13px !important;
    font-size: clamp(15px, 4.4vw, 19px) !important;
  }
}

/* Final answer sizing: flexible for long real-game text. */
.answer-btn {
  min-height: clamp(66px, 8vw, 88px) !important;
  height: auto !important;
  padding: clamp(10px, 1.5vw, 14px) clamp(12px, 1.8vw, 18px) !important;
  font-size: clamp(13px, 1.35vw, 16px) !important;
  font-weight: 750 !important;
  line-height: 1.24 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  hyphens: auto !important;
  text-wrap: pretty;
}

@media (max-width: 620px) {
  .answer-btn {
    min-height: 62px !important;
    height: auto !important;
    padding: 9px 8px !important;
    font-size: clamp(12px, 3.35vw, 14px) !important;
    font-weight: 750 !important;
    line-height: 1.22 !important;
  }
}

@media (max-width: 380px) {
  .answer-btn {
    min-height: 58px !important;
    padding: 8px 7px !important;
    font-size: clamp(11.5px, 3.25vw, 13px) !important;
    line-height: 1.2 !important;
  }
}

/* FINAL CASCADE LOCK: gameplay must use normal vertical document flow. */
body:has(#quiz-screen:not(.hidden)) #barra-superior { position: relative !important; inset: auto !important; transform: none !important; width: min(calc(100% - 20px), 620px) !important; height: 64px !important; min-height: 64px !important; max-height: 64px !important; margin: 10px auto 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 8px 10px !important; overflow: hidden !important; }
body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda,
body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-derecha { flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; align-items: center !important; background: transparent !important; }
body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda { justify-content: flex-start !important; gap: 8px !important; }
body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-derecha { justify-content: flex-end !important; gap: 8px !important; }
body:has(#quiz-screen:not(.hidden)) #gameplay-crest { width: 42px !important; height: 42px !important; flex: 0 0 auto !important; }
body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap { position: relative !important; inset: auto !important; flex: 0 0 44px !important; width: 44px !important; height: 44px !important; margin: 0 !important; transform: none !important; }
body:has(#quiz-screen:not(.hidden)) #timer-seconds-label { font-size: 14px !important; }
body:has(#quiz-screen:not(.hidden)) #quiz-screen { min-height: calc(100svh - 74px) !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; padding: 0 10px 12px !important; overflow: visible !important; }
body:has(#quiz-screen:not(.hidden)) #game-panel { width: min(100%, 620px) !important; max-width: 620px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 auto !important; padding: 12px 12px 14px !important; overflow: visible !important; }
body:has(#quiz-screen:not(.hidden)) #question-container { margin: 0 !important; padding: 0 4px !important; }
body:has(#quiz-screen:not(.hidden)) #question { max-width: 500px !important; font-size: clamp(15px, 1.8vw, 20px) !important; line-height: 1.22 !important; }
body:has(#quiz-screen:not(.hidden)) #answers-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; margin: 0 !important; }
body:has(#quiz-screen:not(.hidden)) .answer-btn { min-height: 58px !important; height: auto !important; padding: 8px 10px !important; font-size: clamp(12px, 1.3vw, 15px) !important; line-height: 1.22 !important; }
body:has(#quiz-screen:not(.hidden)) #game-panel #controls { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; margin: 2px 0 0 !important; }
body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-5050,
body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-saltar { width: auto !important; min-width: 74px !important; height: 30px !important; min-height: 30px !important; padding: 0 12px !important; font-size: 11px !important; }
@media (max-width: 620px) {
  body:has(#quiz-screen:not(.hidden)) #barra-superior { width: calc(100% - 14px) !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; margin-top: 7px !important; padding: 7px !important; gap: 6px !important; }
  body:has(#quiz-screen:not(.hidden)) #gameplay-crest { width: 34px !important; height: 34px !important; }
  body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap { flex-basis: 38px !important; width: 38px !important; height: 38px !important; }
  body:has(#quiz-screen:not(.hidden)) #quiz-screen { min-height: calc(100svh - 65px) !important; padding: 0 7px 10px !important; }
  body:has(#quiz-screen:not(.hidden)) #game-panel { gap: 8px !important; padding: 10px 9px !important; }
  body:has(#quiz-screen:not(.hidden)) #question { font-size: clamp(13px, 3.7vw, 17px) !important; }
  body:has(#quiz-screen:not(.hidden)) .answer-btn { min-height: 54px !important; padding: 7px 6px !important; font-size: clamp(11.5px, 3.1vw, 13.5px) !important; }
}

/* FINAL HUD polish: crest, readable timer, clear exit. */
body:has(#quiz-screen:not(.hidden)) #barra-superior {
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) !important;
  align-items: center !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 8px !important;
  row-gap: 4px !important;
}

body:has(#quiz-screen:not(.hidden)) #gameplay-crest {
  grid-row: 1 / 3 !important;
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  opacity: 1 !important;
  object-fit: contain !important;
  filter:
    drop-shadow(0 5px 10px rgba(0, 0, 0, 0.36))
    drop-shadow(0 0 8px rgba(91, 197, 255, 0.18)) !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .player-info {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: 88px !important;
  padding: 0 !important;
  background: transparent !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .jugador-nombre,
body:has(#quiz-screen:not(.hidden)) #barra-superior .player-name {
  display: none !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-texto {
  grid-column: 2 !important;
  grid-row: 1 !important;
  color: rgba(245, 251, 255, 0.95) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-bar-wrap {
  display: block !important;
  width: 78px !important;
  height: 6px !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-bar {
  width: 78px !important;
  height: 6px !important;
  border: 1px solid rgba(105, 193, 255, 0.36) !important;
  background: rgba(100, 170, 220, 0.16) !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-fill {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(90deg, #28a8f8, #84d8ff) !important;
}

body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap {
  justify-self: center !important;
  width: 50px !important;
  height: 50px !important;
  flex: none !important;
  padding: 4px !important;
  background:
    conic-gradient(#33b5ff calc(var(--timer-pct, 1) * 1turn), rgba(100, 170, 220, 0.18) 0) !important;
  box-shadow:
    inset 0 0 0 1px rgba(154, 220, 255, 0.24),
    0 0 12px rgba(51, 181, 255, 0.18) !important;
}

body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap::before {
  inset: 7px !important;
}

body:has(#quiz-screen:not(.hidden)) #timer-seconds-label {
  font-size: 15px !important;
  font-weight: 900 !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-derecha {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .vidas-info {
  display: flex !important;
  color: #8fd3ff !important;
  font-size: 11px !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .puntos-nivel {
  display: block !important;
  color: rgba(236, 247, 255, 0.92) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body:has(#quiz-screen:not(.hidden)) #exit-game-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 46px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: rgba(245, 251, 255, 0.96) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

body:has(#quiz-screen:not(.hidden)) #exit-game-btn::before {
  content: none !important;
}

body:has(#quiz-screen:not(.hidden)) #quiz-screen {
  min-height: calc(100svh - 78px) !important;
}

@media (max-width: 620px) {
  body:has(#quiz-screen:not(.hidden)) #barra-superior {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    column-gap: 6px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #gameplay-crest {
    width: 32px !important;
    height: 32px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-texto {
    font-size: 9px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .player-info,
  body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-bar,
  body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-bar-wrap {
    width: 54px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap {
    width: 42px !important;
    height: 42px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #timer-seconds-label {
    font-size: 13px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .vidas-info,
  body:has(#quiz-screen:not(.hidden)) #barra-superior .puntos-nivel {
    font-size: 9px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #exit-game-btn {
    min-width: 38px !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 8px !important;
    font-size: 9px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #quiz-screen {
    min-height: calc(100svh - 67px) !important;
  }
}

/* FINAL HUD horizontal balance: true centered timer. */
body:has(#quiz-screen:not(.hidden)) #barra-superior {
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda {
  flex: 0 0 168px !important;
  max-width: 168px !important;
  margin-right: auto !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  column-gap: 6px !important;
}

body:has(#quiz-screen:not(.hidden)) #gameplay-crest {
  width: 36px !important;
  height: 36px !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .player-info {
  width: 70px !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-bar,
body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-bar-wrap {
  width: 68px !important;
}

body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-derecha {
  flex: 0 0 168px !important;
  max-width: 168px !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .vidas-info {
  margin-right: 2px !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .puntos-nivel {
  margin-right: 2px !important;
}

@media (max-width: 620px) {
  body:has(#quiz-screen:not(.hidden)) #barra-superior {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda {
    flex-basis: 118px !important;
    max-width: 118px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    column-gap: 5px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #gameplay-crest {
    width: 29px !important;
    height: 29px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .player-info,
  body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-bar,
  body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-bar-wrap {
    width: 48px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-derecha {
    flex-basis: 118px !important;
    max-width: 118px !important;
    gap: 5px !important;
  }
}

/* Mobile HUD scale rebalance: compact, but real-phone tappable. */
body:has(#quiz-screen:not(.hidden)) #barra-superior {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
}

body:has(#quiz-screen:not(.hidden)) #gameplay-crest {
  width: 40px !important;
  height: 40px !important;
}

body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap {
  width: 55px !important;
  height: 55px !important;
}

body:has(#quiz-screen:not(.hidden)) #timer-seconds-label {
  font-size: 16px !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-texto,
body:has(#quiz-screen:not(.hidden)) #barra-superior .vidas-info,
body:has(#quiz-screen:not(.hidden)) #barra-superior .puntos-nivel {
  font-size: 12px !important;
}

body:has(#quiz-screen:not(.hidden)) #exit-game-btn,
body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-5050,
body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-saltar {
  min-height: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-5050,
body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-saltar {
  min-width: 84px !important;
  padding-inline: 14px !important;
}

body:has(#quiz-screen:not(.hidden)) #quiz-screen {
  min-height: calc(100svh - 82px) !important;
}

@media (max-width: 620px) {
  body:has(#quiz-screen:not(.hidden)) #barra-superior {
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda {
    flex-basis: 128px !important;
    max-width: 128px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    column-gap: 6px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #gameplay-crest {
    width: 33px !important;
    height: 33px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .player-info,
  body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-bar,
  body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-bar-wrap {
    width: 54px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap {
    width: 47px !important;
    height: 47px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap::before {
    inset: 7px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #timer-seconds-label {
    font-size: 15px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .nivel-texto,
  body:has(#quiz-screen:not(.hidden)) #barra-superior .vidas-info,
  body:has(#quiz-screen:not(.hidden)) #barra-superior .puntos-nivel {
    font-size: 10.5px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-derecha {
    flex-basis: 128px !important;
    max-width: 128px !important;
    gap: 6px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #exit-game-btn {
    min-width: 42px !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-5050,
  body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-saltar {
    min-width: 84px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding-inline: 14px !important;
    font-size: 12px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #game-panel #controls {
    gap: 10px !important;
    margin-top: 4px !important;
  }

  body:has(#quiz-screen:not(.hidden)) .answer-btn {
    min-height: 58px !important;
    padding: 9px 8px !important;
    font-size: clamp(12px, 3.3vw, 14px) !important;
  }

  body:has(#quiz-screen:not(.hidden)) #quiz-screen {
    min-height: calc(100svh - 74px) !important;
  }
}

@media (max-width: 380px) {
  body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-izquierda {
    flex-basis: 122px !important;
    max-width: 122px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #barra-superior .barra-derecha {
    flex-basis: 122px !important;
    max-width: 122px !important;
    gap: 5px !important;
  }

  body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-5050,
  body:has(#quiz-screen:not(.hidden)) #game-panel #comodin-saltar {
    min-width: 78px !important;
  }
}

/* Gameplay stadium identity: classic Sabadell atmosphere, modern finish. */
body:has(#quiz-screen:not(.hidden)) {
  background: #082033 !important;
}

body:has(#quiz-screen:not(.hidden))::before {
  content: "" !important;
  position: fixed !important;
  inset: -10px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: url("estadi.jpg") center 48% / cover no-repeat !important;
  filter: blur(0.8px) saturate(1.16) contrast(1.04) brightness(1.04) !important;
  transform: scale(1.01) !important;
  opacity: 1 !important;
  animation: none !important;
}

body:has(#quiz-screen:not(.hidden))::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(110, 210, 255, 0.2), transparent 34%),
    radial-gradient(circle at 50% 62%, rgba(56, 158, 84, 0.16), transparent 38%),
    radial-gradient(circle at 50% 54%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1) 62%, rgba(0, 0, 0, 0.24) 100%),
    linear-gradient(180deg, rgba(3, 18, 34, 0.1) 0%, rgba(3, 24, 36, 0.02) 44%, rgba(0, 6, 13, 0.26) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.08)) !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior,
body:has(#quiz-screen:not(.hidden)) #quiz-screen {
  position: relative !important;
  z-index: 1 !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel {
  background:
    radial-gradient(circle at 50% -8%, rgba(98, 204, 255, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(8, 27, 48, 0.52), rgba(3, 15, 30, 0.46)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(70, 185, 255, 0.16) !important;
  backdrop-filter: blur(12px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.18) !important;
}

body:has(#quiz-screen:not(.hidden)):has(#question-image-wrap.hidden) #game-panel {
  margin-top: clamp(26px, 5svh, 58px) !important;
}

body:has(#quiz-screen:not(.hidden)) #barra-superior {
  background:
    radial-gradient(circle at 50% -24%, rgba(82, 193, 255, 0.24), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), transparent 36%),
    linear-gradient(180deg, rgba(7, 31, 55, 0.7), rgba(2, 13, 28, 0.64)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    0 14px 34px rgba(0, 0, 0, 0.32),
    0 0 24px rgba(58, 180, 255, 0.14) !important;
  backdrop-filter: blur(12px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.14) !important;
}

@media (max-width: 620px) {
  body:has(#quiz-screen:not(.hidden))::before {
    inset: -8px !important;
    background-position: center 50% !important;
    filter: blur(0.7px) saturate(1.12) contrast(1.02) brightness(0.96) !important;
    transform: scale(1.01) !important;
    opacity: 1 !important;
  }

  body:has(#quiz-screen:not(.hidden))::after {
    background:
      radial-gradient(circle at 50% 28%, rgba(110, 210, 255, 0.18), transparent 32%),
      radial-gradient(circle at 50% 60%, rgba(56, 158, 84, 0.14), transparent 36%),
      radial-gradient(circle at 50% 52%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.14) 60%, rgba(0, 0, 0, 0.3) 100%),
      linear-gradient(180deg, rgba(3, 18, 34, 0.12) 0%, rgba(3, 24, 36, 0.04) 42%, rgba(0, 6, 13, 0.32) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.08), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.08)) !important;
  }

  body:has(#quiz-screen:not(.hidden)):has(#question-image-wrap.hidden) #game-panel {
    margin-top: clamp(18px, 4svh, 40px) !important;
  }
}

/* HUD visibility guard: gameplay chrome never leaks into home/auth/menus. */
body:not(:has(#quiz-screen:not(.hidden))) #barra-superior,
body:not(:has(#quiz-screen:not(.hidden))) #timer-bar-wrap {
  display: none !important;
}

/* Home top alignment: user pill and crest sit on the true vertical axis. */
#inicio-screen:not(.hidden) .barra-top {
  width: min(100%, 420px) !important;
  max-width: 420px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 0 auto 8px !important;
  padding: 8px 0 4px !important;
  min-height: 36px !important;
}

#inicio-screen:not(.hidden) .barra-top #auth-session-bar {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
}

#inicio-screen:not(.hidden) .barra-top #lang-selector {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

#inicio-screen:not(.hidden) #game-logo {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#inicio-screen:not(.hidden) .intro-title,
#inicio-screen:not(.hidden) .intro-text,
#inicio-screen:not(.hidden) .weekly-challenges,
#inicio-screen:not(.hidden) button.btn-principal {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 480px) {
  #inicio-screen:not(.hidden) .barra-top {
    width: 100% !important;
    max-width: 340px !important;
    gap: 6px !important;
    padding-top: 6px !important;
  }
}

/* Home true center axis: align every main-menu element to the viewport middle. */
#inicio-screen:not(.hidden) {
  align-items: center !important;
  text-align: center !important;
}

#inicio-screen:not(.hidden) .barra-top {
  width: 100% !important;
  max-width: min(calc(100vw - 32px), 420px) !important;
}

#inicio-screen:not(.hidden) .barra-top #auth-session-bar {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
}

#inicio-screen:not(.hidden) .barra-top #lang-selector {
  right: 0 !important;
  z-index: 2 !important;
}

#inicio-screen:not(.hidden) > #game-logo,
#inicio-screen:not(.hidden) > .intro-title,
#inicio-screen:not(.hidden) > .intro-text,
#inicio-screen:not(.hidden) > .weekly-challenges,
#inicio-screen:not(.hidden) > button.btn-principal,
#inicio-screen:not(.hidden) > .retos-divider,
#inicio-screen:not(.hidden) > button.btn-secundario {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#inicio-screen:not(.hidden) > .intro-title,
#inicio-screen:not(.hidden) > .intro-text {
  text-align: center !important;
}

/* Viewport-axis lock for the main menu: no container can redefine center. */
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #game-logo,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .intro-title,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .intro-text,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .weekly-challenges,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > button.btn-principal,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .retos-divider,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > button.btn-secundario {
  flex: 0 0 auto !important;
  align-self: center !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top {
  margin-left: auto !important;
  margin-right: auto !important;
}

#inicio-screen .home-register-access:not(.hidden):not([hidden]) {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top, 12px)) !important;
  left: max(14px, env(safe-area-inset-left, 14px)) !important;
  z-index: 20 !important;
  width: auto !important;
  max-width: min(42vw, 132px) !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #d9efff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: 0 0 10px rgba(69, 164, 255, 0.34) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: color 0.22s ease, text-shadow 0.22s ease, opacity 0.22s ease, transform 0.22s ease !important;
}

#inicio-screen .home-register-access:not(.hidden):not([hidden])::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: #7bc9ff;
  box-shadow: 0 0 10px rgba(95, 185, 255, 0.58);
  flex: 0 0 auto;
}

#inicio-screen .home-register-access:not(.hidden):not([hidden]):hover,
#inicio-screen .home-register-access:not(.hidden):not([hidden]):focus-visible {
  color: #ffffff !important;
  text-shadow: 0 0 14px rgba(83, 177, 255, 0.58) !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important;
  outline: none !important;
}

#inicio-screen .home-register-access:not(.hidden):not([hidden]):active {
  transform: translateY(0) !important;
  opacity: 0.86 !important;
}

@media (max-width: 360px) {
  #inicio-screen .home-register-access:not(.hidden):not([hidden]) {
    left: max(12px, env(safe-area-inset-left, 12px)) !important;
    max-width: 118px !important;
    font-size: 12px !important;
  }
}

/* Center the whole home top controls group as one unit. */
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top {
  width: max-content !important;
  max-width: calc(100vw - 28px) !important;
  justify-content: center !important;
  gap: 12px !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #lang-selector {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
}

@media (max-width: 420px) {
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .weekly-challenges,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > button.btn-principal,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .retos-divider {
    width: calc(100vw - 28px) !important;
  }
}

/* Home profile access: compact premium progress pill. */
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top {
  padding-top: max(8px, env(safe-area-inset-top, 8px)) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) {
  display: inline-grid !important;
  grid-template-columns: 38px auto minmax(58px, 86px) auto !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  max-width: min(72vw, 226px) !important;
  min-width: 164px !important;
  min-height: 44px !important;
  padding: 4px 9px 4px 4px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(116, 199, 255, 0.22) !important;
  background: linear-gradient(135deg, rgba(5, 16, 30, 0.72), rgba(12, 43, 70, 0.5)) !important;
  box-shadow: 0 0 18px rgba(46, 154, 235, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden):hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden):focus-visible {
  border-color: rgba(132, 210, 255, 0.42) !important;
  box-shadow: 0 0 22px rgba(62, 171, 255, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.07) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden):active {
  transform: translateY(0) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .profile-avatar {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 34%, #ffffff 0 16%, transparent 17%),
    radial-gradient(ellipse at 50% 71%, rgba(255, 255, 255, 0.95) 0 27%, transparent 28%) !important;
  border: 0 !important;
  box-shadow:
    0 0 10px rgba(167, 224, 255, 0.2) !important;
  grid-column: 1 !important;
  flex: 0 0 28px !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .profile-avatar::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 5px !important;
  width: 16px !important;
  height: 7px !important;
  border-radius: 9px 9px 4px 4px !important;
  background: #ffffff !important;
  box-shadow: 0 0 8px rgba(167, 224, 255, 0.22) !important;
  transform: translateX(-50%) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .profile-avatar::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-current-user {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .auth-nivel-wrap {
  display: contents !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-label {
  grid-column: 2 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #f5fbff !important;
  text-shadow: 0 0 10px rgba(92, 187, 255, 0.28) !important;
  white-space: nowrap !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-bar {
  grid-column: 3 !important;
  width: 100% !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-fill {
  border-radius: inherit !important;
  background: linear-gradient(90deg, #56c7ff, #9df1ff) !important;
  box-shadow: 0 0 10px rgba(82, 196, 255, 0.58) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-percent {
  grid-column: 4 !important;
  min-width: 28px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: rgba(230, 247, 255, 0.82) !important;
  text-align: right !important;
}

@media (max-width: 380px) {
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) {
    grid-template-columns: 34px auto minmax(42px, 58px) auto !important;
    min-width: 148px !important;
    min-height: 40px !important;
    max-width: calc(100vw - 116px) !important;
    gap: 5px !important;
    padding: 3px 7px 3px 3px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .profile-avatar {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
  }
}

/* Definitive avatar asset integration. */
.avatar-profile-frame,
.profile-avatar-large-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.avatar-profile-frame::before,
.avatar-profile-frame::after,
.profile-avatar-large-frame::before,
.profile-avatar-large-frame::after {
  content: none !important;
}

.avatar-profile,
.profile-avatar-large {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(74, 181, 255, 0.42));
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .avatar-profile-frame {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px !important;
  grid-column: 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .avatar-profile-frame .avatar-profile {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

#profile-header .profile-avatar-large-frame {
  width: 136px;
  height: 136px;
  flex: 0 0 136px;
  border-radius: 50%;
}

#profile-header .profile-avatar-select-trigger {
  position: relative;
  padding: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  transition: transform 0.18s ease, filter 0.18s ease;
}

#profile-header .profile-avatar-select-trigger:hover,
#profile-header .profile-avatar-select-trigger:focus-visible {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 0 16px rgba(74, 181, 255, 0.42));
  outline: none;
}

.profile-avatar-edit-badge {
  position: absolute;
  right: 8px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(219, 245, 255, 0.95);
  background: linear-gradient(135deg, #0077d9, #00b7ff);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), 0 0 14px rgba(67, 178, 255, 0.5);
}

.profile-avatar-edit-badge::before,
.profile-avatar-edit-badge::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 999px;
}

.profile-avatar-edit-badge::before {
  left: 8px;
  top: 13px;
  width: 12px;
  height: 3px;
}

.profile-avatar-edit-badge::after {
  left: 13px;
  top: 8px;
  width: 3px;
  height: 12px;
}

.avatar-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(1, 8, 19, 0.74);
  backdrop-filter: blur(10px);
  animation: avatarBackdropIn 0.18s ease both;
}

.avatar-modal {
  width: min(560px, 100%);
  max-height: min(720px, calc(100vh - 36px));
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(104, 196, 255, 0.42);
  background:
    radial-gradient(circle at 14% 0%, rgba(0, 143, 255, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(3, 21, 44, 0.98), rgba(3, 12, 26, 0.98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 18px;
  animation: avatarModalIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.avatar-modal-header {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.avatar-modal-header h3 {
  grid-column: 2;
  margin: 0;
  color: #f3fbff;
  font-size: 22px;
  line-height: 1.15;
  text-align: center;
}

.avatar-modal-close {
  position: relative;
  grid-column: 3;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(130, 211, 255, 0.32);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.avatar-modal-close::before,
.avatar-modal-close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  margin-left: -8px;
  margin-top: -1px;
  background: #e8f8ff;
  border-radius: 999px;
}

.avatar-modal-close::before {
  transform: rotate(45deg);
}

.avatar-modal-close::after {
  transform: rotate(-45deg);
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.avatar-choice {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 8px;
  border-radius: 50%;
  border: 2px solid rgba(98, 190, 255, 0.26);
  background:
    radial-gradient(circle at 50% 42%, rgba(44, 169, 255, 0.32), rgba(3, 22, 45, 0.86) 66%),
    #041326;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 10px 22px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.avatar-choice:hover,
.avatar-choice:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(138, 218, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 22px rgba(55, 174, 255, 0.32);
  outline: none;
}

.avatar-choice img {
  width: 112%;
  height: 112%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(83, 190, 255, 0.34));
}

.avatar-choice.is-selected {
  border-color: #ffd56a;
  box-shadow:
    0 0 0 3px rgba(255, 213, 106, 0.28),
    0 0 22px rgba(255, 213, 106, 0.36),
    0 0 34px rgba(69, 188, 255, 0.38);
}

.avatar-selected-mark {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd56a, #1fbfff);
  border: 2px solid #fff8d8;
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.avatar-choice.is-selected .avatar-selected-mark {
  opacity: 1;
  transform: scale(1);
}

.avatar-selected-mark::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 7px;
  width: 10px;
  height: 6px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
}

.avatar-choice.is-locked {
  border-style: dashed;
  border-color: rgba(177, 204, 221, 0.28);
  background: linear-gradient(135deg, rgba(91, 108, 122, 0.36), rgba(21, 29, 39, 0.9));
  color: rgba(239, 247, 255, 0.78);
  opacity: 0.72;
}

.avatar-choice-placeholder {
  width: 54%;
  height: 54%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, rgba(230, 238, 246, 0.72) 0 19%, transparent 20%),
    radial-gradient(ellipse at 50% 78%, rgba(230, 238, 246, 0.6) 0 34%, transparent 35%);
  filter: grayscale(1);
}

.avatar-lock-mark {
  position: absolute;
  top: 26%;
  width: 28px;
  height: 22px;
  border-radius: 6px;
  background: rgba(235, 243, 250, 0.72);
}

.avatar-lock-mark::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -13px;
  width: 16px;
  height: 16px;
  border: 4px solid rgba(235, 243, 250, 0.72);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.avatar-choice-label,
.avatar-choice small,
.avatar-choice-progress {
  position: absolute;
  left: 8px;
  right: 8px;
  text-align: center;
}

.avatar-choice-label {
  bottom: 28px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.avatar-choice small {
  bottom: 12px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  color: rgba(232, 243, 250, 0.68);
}

.avatar-choice-progress {
  display: none;
  bottom: 4px;
  font-size: 9px;
  font-weight: 800;
  color: rgba(255, 213, 106, 0.86);
}

.avatar-choice.has-progress .avatar-choice-progress {
  display: block;
}

.avatar-modal-message {
  min-height: 20px;
  margin: 14px 0 0;
  color: #dff6ff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.avatar-modal-message.visible {
  opacity: 1;
}

@keyframes avatarBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes avatarModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#profile-header {
  border: 1px solid rgba(67, 162, 238, 0.5);
  background:
    radial-gradient(circle at 14% 28%, rgba(0, 150, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(2, 24, 46, 0.92), rgba(2, 15, 31, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 28px rgba(33, 151, 255, 0.18),
    0 20px 44px rgba(0, 0, 0, 0.28);
}

@media (max-width: 380px) {
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .avatar-profile-frame {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  #profile-header .profile-avatar-large-frame {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
  }

  .profile-avatar-edit-badge {
    right: 2px;
    bottom: 4px;
    width: 22px;
    height: 22px;
  }

  .profile-avatar-edit-badge::before {
    left: 6px;
    top: 10px;
    width: 10px;
  }

  .profile-avatar-edit-badge::after {
    left: 10px;
    top: 6px;
    height: 10px;
  }

  .avatar-modal {
    padding: 14px;
    border-radius: 14px;
  }

  .avatar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .avatar-modal-header h3 {
    font-size: 19px;
  }

  .avatar-choice {
    padding: 5px;
  }

  .avatar-choice-label {
    bottom: 28px;
    font-size: 9px;
  }

  .avatar-choice small {
    bottom: 8px;
    font-size: 8px;
  }

  .avatar-selected-mark {
    right: 5px;
    bottom: 5px;
    width: 24px;
    height: 24px;
  }

  .avatar-selected-mark::after {
    left: 6px;
    top: 6px;
    width: 8px;
    height: 5px;
  }
}

@media (min-width: 381px) and (max-width: 640px) {
  #profile-header .profile-avatar-large-frame {
    width: 92px;
    height: 92px;
    flex-basis: 92px;
  }

  .profile-avatar-edit-badge {
    right: 3px;
    bottom: 5px;
    width: 24px;
    height: 24px;
  }

  .avatar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Ranking weekly: Option A - Glass Premium leaderboard. */
body:has(#ranking-screen:not(.hidden)) {
  background: #020914 !important;
}

body:has(#ranking-screen:not(.hidden))::before {
  content: "" !important;
  position: fixed !important;
  inset: -18px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: url("estadi.jpg") center 48% / cover no-repeat !important;
  filter: blur(3.5px) saturate(0.72) contrast(0.9) brightness(0.48) !important;
  transform: scale(1.04) !important;
  opacity: 0.94 !important;
  animation: none !important;
}

body:has(#ranking-screen:not(.hidden))::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(46, 168, 255, 0.16), transparent 30%),
    radial-gradient(circle at 50% 62%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.44) 56%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(180deg, rgba(1, 10, 22, 0.56), rgba(0, 5, 14, 0.74)) !important;
}

#ranking-screen {
  position: relative !important;
  z-index: 1 !important;
  min-height: 100svh !important;
  width: 100% !important;
  padding: 22px 14px 28px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  color: rgba(248, 252, 255, 0.98) !important;
}

#ranking-screen::before {
  content: "" !important;
  position: absolute !important;
  inset: 10px max(10px, calc((100vw - 620px) / 2)) 14px !important;
  z-index: -1 !important;
  border: 1px solid rgba(103, 194, 255, 0.34) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(38, 156, 236, 0.15), transparent 38%),
    linear-gradient(180deg, rgba(5, 25, 45, 0.62), rgba(1, 8, 18, 0.68)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 26px 70px rgba(0, 0, 0, 0.48),
    0 0 30px rgba(29, 155, 255, 0.09) !important;
  backdrop-filter: blur(16px) !important;
}

#ranking-title {
  margin: 4px 0 16px !important;
  color: #f7fbff !important;
  font-size: clamp(22px, 5.4vw, 28px) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.58) !important;
}

#ranking-list {
  width: min(100%, 540px) !important;
  max-width: 540px !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

#ranking-list li {
  position: relative !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(247, 251, 255, 0.96) !important;
  border: 1px solid rgba(113, 197, 255, 0.25) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 42%),
    linear-gradient(180deg, rgba(8, 25, 43, 0.72), rgba(2, 10, 22, 0.74)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 9px 24px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(14px) !important;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease !important;
}

#ranking-list li:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(135, 211, 255, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 13px 30px rgba(0, 0, 0, 0.32),
    0 0 18px rgba(29, 155, 255, 0.1) !important;
}

#ranking-list li.ranking-podium {
  display: flex !important;
  min-height: 154px !important;
  padding: 14px 10px 12px !important;
  align-items: stretch !important;
  justify-content: center !important;
}

#ranking-list li.ranking-top-1 {
  grid-column: 3 / 5 !important;
  grid-row: 1 !important;
  min-height: 178px !important;
  transform: translateY(-6px) !important;
  border-color: rgba(230, 190, 91, 0.58) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(244, 202, 93, 0.34), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 40%),
    linear-gradient(180deg, rgba(137, 101, 31, 0.66), rgba(37, 24, 10, 0.78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 181, 0.25),
    0 16px 38px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(213, 169, 62, 0.22) !important;
}

#ranking-list li.ranking-top-2 {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  align-self: end !important;
  border-color: rgba(202, 221, 235, 0.5) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(221, 235, 245, 0.28), transparent 48%),
    linear-gradient(180deg, rgba(84, 104, 121, 0.58), rgba(13, 25, 37, 0.78)) !important;
}

#ranking-list li.ranking-top-3 {
  grid-column: 5 / 7 !important;
  grid-row: 1 !important;
  align-self: end !important;
  border-color: rgba(207, 139, 91, 0.48) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(221, 142, 86, 0.28), transparent 48%),
    linear-gradient(180deg, rgba(96, 48, 20, 0.62), rgba(20, 12, 8, 0.78)) !important;
}

#ranking-list li.ranking-rest {
  grid-column: 1 / -1 !important;
  min-height: 46px !important;
  padding: 0 14px !important;
}

#ranking-list li.ranking-current-user {
  border-color: rgba(116, 204, 255, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(46, 168, 255, 0.12),
    0 10px 26px rgba(0, 0, 0, 0.26) !important;
  transform: none !important;
}

#ranking-list li.ranking-current-user::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(46, 168, 255, 0.12), transparent 42%) !important;
}

.ranking-row-main {
  width: 100% !important;
  display: grid !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 !important;
}

.ranking-podium .ranking-row-main {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto auto auto !important;
  justify-items: center !important;
  align-content: center !important;
  text-align: center !important;
  gap: 6px !important;
}

.ranking-rest .ranking-row-main {
  grid-template-columns: 28px 28px minmax(0, 1fr) minmax(70px, auto) 46px !important;
}

.ranking-position {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  min-height: 28px !important;
  color: rgba(243, 249, 255, 0.92) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
}

.ranking-podium .ranking-position {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 18px rgba(0, 0, 0, 0.28) !important;
}

.ranking-top-1 .ranking-position {
  background: linear-gradient(180deg, #f0d078, #b78425) !important;
  color: #241706 !important;
  border-color: rgba(255, 229, 142, 0.66) !important;
}

.ranking-avatar {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ranking-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.42)) !important;
}

.ranking-podium .ranking-avatar {
  width: 44px !important;
  height: 44px !important;
}

.ranking-top-1 .ranking-avatar {
  width: 52px !important;
  height: 52px !important;
}

.ranking-name {
  min-width: 0 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
}

.ranking-podium .ranking-name {
  max-width: 100% !important;
  text-align: center !important;
  font-size: 15px !important;
}

.ranking-top-1 .ranking-name {
  font-size: 16px !important;
}

.ranking-points,
.ranking-streak {
  color: rgba(235, 246, 255, 0.92) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.ranking-points {
  text-align: right !important;
}

.ranking-points strong {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

.ranking-podium .ranking-points,
.ranking-podium .ranking-streak {
  text-align: center !important;
}

.ranking-row-meta {
  display: none !important;
}

.ranking-next-gap {
  width: min(100%, 540px) !important;
  max-width: 540px !important;
  margin: -4px auto 12px !important;
  padding: 9px 12px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(92, 196, 255, 0.38) !important;
  background: rgba(4, 20, 36, 0.58) !important;
  color: rgba(232, 246, 255, 0.92) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(12px) !important;
}

.ranking-actions {
  width: min(100%, 540px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 18px auto 0 !important;
}

#ranking-screen .ranking-actions button {
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(111, 197, 255, 0.32) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%),
    rgba(3, 16, 31, 0.6) !important;
  color: rgba(239, 247, 255, 0.94) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 9px 20px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(12px) !important;
}

#ranking-screen .ranking-actions button:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(132, 216, 255, 0.7) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 44%),
    rgba(8, 35, 62, 0.72) !important;
}

#ranking-screen .ranking-actions #show-top10 {
  background:
    linear-gradient(180deg, rgba(30, 139, 239, 0.95), rgba(8, 73, 156, 0.95)) !important;
  border-color: rgba(126, 211, 255, 0.62) !important;
  color: #fff !important;
}

#ranking-screen .ranking-actions #back-btn {
  grid-column: 2 !important;
}

@media (max-width: 620px) {
  #ranking-screen {
    padding: 18px 10px 24px !important;
  }

  #ranking-screen::before {
    inset: 8px 8px 10px !important;
    border-radius: 16px !important;
  }

  #ranking-title {
    margin-bottom: 13px !important;
  }

  #ranking-list {
    width: 100% !important;
    gap: 7px !important;
  }

  #ranking-list li.ranking-podium {
    min-height: 138px !important;
    padding: 12px 7px 10px !important;
  }

  #ranking-list li.ranking-top-1 {
    min-height: 158px !important;
  }

  .ranking-podium .ranking-position {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }

  .ranking-podium .ranking-avatar {
    width: 38px !important;
    height: 38px !important;
  }

  .ranking-top-1 .ranking-avatar {
    width: 46px !important;
    height: 46px !important;
  }

  .ranking-podium .ranking-name {
    font-size: 13px !important;
  }

  .ranking-top-1 .ranking-name {
    font-size: 14px !important;
  }

  .ranking-points,
  .ranking-streak {
    font-size: 12px !important;
  }

  #ranking-list li.ranking-rest {
    min-height: 44px !important;
    padding: 0 10px !important;
  }

  .ranking-rest .ranking-row-main {
    grid-template-columns: 24px 24px minmax(0, 1fr) minmax(58px, auto) 38px !important;
    gap: 7px !important;
  }

  .ranking-name {
    font-size: 13px !important;
  }

  .ranking-points strong {
    font-size: 14px !important;
  }

  .ranking-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 14px !important;
  }

  #ranking-screen .ranking-actions #show-history {
    grid-column: 1 / -1 !important;
  }

  #ranking-screen .ranking-actions #back-btn {
    grid-column: 1 / -1 !important;
    width: 48% !important;
    justify-self: center !important;
  }
}

/* Ranking history: mobile-safe scroll and clear exits. */
body:has(#history-screen:not(.hidden)) {
  background: #020914 !important;
  min-height: 100dvh !important;
  overflow-y: auto !important;
}

body:has(#history-screen:not(.hidden))::before {
  content: "" !important;
  position: fixed !important;
  inset: -18px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: url("estadi.jpg") center 48% / cover no-repeat !important;
  filter: blur(2px) saturate(0.78) contrast(0.94) brightness(0.6) !important;
  transform: scale(1.04) !important;
  opacity: 0.95 !important;
  animation: none !important;
}

body:has(#history-screen:not(.hidden))::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(0, 7, 18, 0.58), rgba(0, 5, 14, 0.74)),
    radial-gradient(circle at 50% 18%, rgba(46, 168, 255, 0.14), transparent 34%) !important;
}

#history-screen {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-height: 100dvh !important;
  height: auto !important;
  padding: max(18px, env(safe-area-inset-top)) 12px calc(86px + env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
  background: transparent !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
}

#history-screen h2 {
  width: min(100%, 540px) !important;
  margin: 0 auto 12px !important;
  color: #f7fbff !important;
  font-size: clamp(22px, 5.8vw, 30px) !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.58) !important;
}

#history-list {
  width: min(100%, 540px) !important;
  max-width: 540px !important;
  display: grid !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#history-list li {
  margin: 0 !important;
}

#history-list .history-week-btn {
  min-height: 76px !important;
  margin: 0 !important;
  padding: 12px 48px 12px 16px !important;
  border-radius: 16px !important;
}

.history-fixed-home {
  position: fixed !important;
  left: 50% !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  width: min(100%, 540px) !important;
  max-width: calc(100vw - 24px) !important;
  min-height: 52px !important;
  z-index: 12010 !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(126, 211, 255, 0.62) !important;
  background: linear-gradient(180deg, #168dff, #064fca) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 14px 28px rgba(0, 38, 96, 0.48),
    0 0 24px rgba(0, 132, 255, 0.2) !important;
}

#history-screen::after {
  content: "" !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(92px + env(safe-area-inset-bottom)) !important;
  z-index: 12000 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent, rgba(0, 7, 18, 0.86) 48%, rgba(0, 7, 18, 0.98)) !important;
}

@media (max-width: 390px), (max-height: 740px) {
  #history-screen {
    padding: max(12px, env(safe-area-inset-top)) 10px calc(78px + env(safe-area-inset-bottom)) !important;
  }

  #history-screen h2 {
    margin-bottom: 10px !important;
    font-size: 22px !important;
  }

  #history-list {
    gap: 7px !important;
  }

  #history-list .history-week-btn {
    min-height: 66px !important;
    padding: 10px 42px 10px 14px !important;
    border-radius: 14px !important;
  }

  .titulo-semana {
    font-size: 15px !important;
  }

  .fecha-semana {
    font-size: 12px !important;
  }

  .history-fixed-home {
    width: min(100%, 420px) !important;
    max-width: calc(100vw - 20px) !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }
}

/* Gameplay final atmosphere correction: brighter stadium, lower text-only layout. */
body:has(#quiz-screen:not(.hidden))::before {
  inset: -4px !important;
  background: url("estadi.jpg") center 48% / cover no-repeat !important;
  filter: blur(0.35px) saturate(1.28) contrast(1.08) brightness(1.22) !important;
  transform: scale(1.004) !important;
  opacity: 1 !important;
}

body:has(#quiz-screen:not(.hidden))::after {
  background:
    radial-gradient(circle at 50% 25%, rgba(120, 218, 255, 0.18), transparent 34%),
    radial-gradient(circle at 50% 64%, rgba(68, 180, 92, 0.18), transparent 40%),
    radial-gradient(circle at 50% 54%, transparent 0 44%, rgba(0, 0, 0, 0.08) 68%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(180deg, rgba(3, 18, 34, 0.06) 0%, rgba(3, 24, 36, 0) 44%, rgba(0, 6, 13, 0.18) 100%) !important;
}

body:has(#quiz-screen:not(.hidden)) #game-panel {
  background:
    radial-gradient(circle at 50% -8%, rgba(110, 212, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(8, 27, 48, 0.44), rgba(3, 15, 30, 0.38)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 34px rgba(0, 0, 0, 0.26),
    0 0 24px rgba(70, 185, 255, 0.14) !important;
  backdrop-filter: blur(9px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.2) !important;
}

body:has(#quiz-screen:not(.hidden)):has(#question-image-wrap.hidden) #barra-superior {
  margin-top: clamp(42px, 7svh, 82px) !important;
}

body:has(#quiz-screen:not(.hidden)):has(#question-image-wrap.hidden) #game-panel {
  margin-top: 0 !important;
}

@media (max-width: 620px) {
  body:has(#quiz-screen:not(.hidden))::before {
    filter: blur(0.3px) saturate(1.22) contrast(1.06) brightness(1.12) !important;
  }

  body:has(#quiz-screen:not(.hidden)):has(#question-image-wrap.hidden) #barra-superior {
    margin-top: clamp(28px, 5.5svh, 56px) !important;
  }
}

/* Gameplay class fallback: same visual intent without relying on :has support. */
body.gameplay-active {
  background: #163f55 !important;
}

body.gameplay-active::before {
  content: "" !important;
  position: fixed !important;
  inset: -4px !important;
  width: auto !important;
  height: auto !important;
  left: -4px !important;
  top: -4px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: url("estadi.jpg") center 48% / cover no-repeat !important;
  filter: blur(0.2px) saturate(1.34) contrast(1.08) brightness(1.34) !important;
  transform: scale(1.002) !important;
  opacity: 1 !important;
  animation: none !important;
}

body.gameplay-active::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(128, 222, 255, 0.14), transparent 34%),
    radial-gradient(circle at 50% 66%, rgba(76, 190, 96, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(2, 13, 24, 0.02) 0%, rgba(3, 24, 36, 0) 44%, rgba(0, 6, 13, 0.1) 100%) !important;
}

body.gameplay-active #barra-superior,
body.gameplay-active #quiz-screen {
  position: relative !important;
  z-index: 1 !important;
}

body.gameplay-active .container {
  min-height: 100svh !important;
  justify-content: center !important;
}

body.gameplay-active #barra-superior {
  margin-top: 0 !important;
}

body.gameplay-active #quiz-screen {
  min-height: auto !important;
  padding-bottom: 0 !important;
}

body.gameplay-active #barra-superior {
  background:
    radial-gradient(circle at 50% -24%, rgba(82, 193, 255, 0.2), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(7, 31, 55, 0.54), rgba(2, 13, 28, 0.48)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.22),
    0 0 20px rgba(58, 180, 255, 0.12) !important;
  backdrop-filter: blur(8px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.18) !important;
}

body.gameplay-active #game-panel {
  background:
    radial-gradient(circle at 50% -8%, rgba(110, 212, 255, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(8, 27, 48, 0.34), rgba(3, 15, 30, 0.3)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 12px 28px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(70, 185, 255, 0.12) !important;
  backdrop-filter: blur(7px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.22) !important;
}

body.gameplay-active #game-panel {
  margin-top: 0 !important;
}

@media (max-width: 620px) {
  body.gameplay-active::before {
    filter: blur(0.15px) saturate(1.26) contrast(1.06) brightness(1.22) !important;
  }

  body.gameplay-active .container {
    min-height: 100svh !important;
    justify-content: center !important;
  }
}

/* Gameplay centering lock: beats older :has() layout rules. */
html body.gameplay-active .container {
  min-height: 100svh !important;
  height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  padding-top: clamp(72px, 12svh, 128px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body.gameplay-active #barra-superior#barra-superior {
  width: min(calc(100% - 40px), 760px) !important;
  max-width: 760px !important;
  min-height: 78px !important;
  height: 78px !important;
  max-height: 78px !important;
  margin: 0 auto !important;
}

html body.gameplay-active #quiz-screen#quiz-screen {
  min-height: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html body.gameplay-active #game-panel#game-panel {
  width: min(calc(100% - 40px), 760px) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 18px 28px 22px !important;
}

@media (max-width: 620px) {
  html body.gameplay-active .container {
    min-height: 100svh !important;
    height: 100svh !important;
    justify-content: flex-start !important;
    padding-top: clamp(44px, 8svh, 76px) !important;
  }

  html body.gameplay-active #barra-superior#barra-superior,
  html body.gameplay-active #game-panel#game-panel {
    width: calc(100% - 28px) !important;
  }

  html body.gameplay-active #barra-superior#barra-superior {
    min-height: 72px !important;
    height: 72px !important;
    max-height: 72px !important;
  }

  html body.gameplay-active #game-panel#game-panel {
    padding: 16px 16px 18px !important;
  }
}

/* Gameplay right HUD scale: make lives, points and exit clearly readable. */
html body.gameplay-active #barra-superior#barra-superior .barra-derecha {
  flex-basis: 300px !important;
  max-width: 300px !important;
  gap: 18px !important;
  align-items: center !important;
}

html body.gameplay-active #barra-superior#barra-superior .vidas-info,
html body.gameplay-active #barra-superior#barra-superior .puntos-nivel {
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html body.gameplay-active #barra-superior#barra-superior .vidas-info {
  gap: 10px !important;
}

html body.gameplay-active #barra-superior#barra-superior .puntos-nivel {
  min-width: 68px !important;
}

html body.gameplay-active #exit-game-btn#exit-game-btn {
  min-width: 86px !important;
  height: 53px !important;
  min-height: 53px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  font-size: 19px !important;
  font-weight: 950 !important;
}

@media (max-width: 620px) {
  html body.gameplay-active #barra-superior#barra-superior .barra-derecha {
    flex-basis: 198px !important;
    max-width: 198px !important;
    gap: 9px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .vidas-info,
  html body.gameplay-active #barra-superior#barra-superior .puntos-nivel {
    font-size: 15px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .puntos-nivel {
    min-width: 48px !important;
  }

  html body.gameplay-active #exit-game-btn#exit-game-btn {
    min-width: 65px !important;
    height: 43px !important;
    min-height: 43px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
  }
}

/* Mobile real HUD ergonomics: larger readable/tappable gameplay chrome. */
@media (max-width: 620px) {
  html body.gameplay-active #barra-superior#barra-superior {
    width: calc(100% - 18px) !important;
    min-height: 92px !important;
    height: 92px !important;
    max-height: 92px !important;
    padding: 12px 12px !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .barra-izquierda {
    flex: 0 1 138px !important;
    max-width: 138px !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
  }

  html body.gameplay-active #gameplay-crest#gameplay-crest {
    width: 42px !important;
    height: 42px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .nivel-texto {
    font-size: 13px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .player-info,
  html body.gameplay-active #barra-superior#barra-superior .nivel-bar,
  html body.gameplay-active #barra-superior#barra-superior .nivel-bar-wrap {
    width: 78px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .nivel-bar-wrap,
  html body.gameplay-active #barra-superior#barra-superior .nivel-bar {
    height: 8px !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap {
    width: 62px !important;
    height: 62px !important;
    padding: 5px !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap::before {
    inset: 8px !important;
  }

  html body.gameplay-active #timer-seconds-label#timer-seconds-label {
    font-size: 18px !important;
    font-weight: 950 !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .barra-derecha {
    flex: 0 1 206px !important;
    max-width: 206px !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .vidas-info,
  html body.gameplay-active #barra-superior#barra-superior .puntos-nivel {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .vidas-info {
    gap: 8px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .puntos-nivel {
    min-width: 58px !important;
  }

  html body.gameplay-active #exit-game-btn#exit-game-btn {
    min-width: 78px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 16px !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }
}

@media (max-width: 380px) {
  html body.gameplay-active #barra-superior#barra-superior {
    min-height: 88px !important;
    height: 88px !important;
    max-height: 88px !important;
    padding: 10px 9px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .barra-izquierda {
    flex-basis: 118px !important;
    max-width: 118px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 6px !important;
  }

  html body.gameplay-active #gameplay-crest#gameplay-crest {
    width: 36px !important;
    height: 36px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .nivel-texto {
    font-size: 12px !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap {
    width: 58px !important;
    height: 58px !important;
  }

  html body.gameplay-active #timer-seconds-label#timer-seconds-label {
    font-size: 17px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .barra-derecha {
    flex-basis: 178px !important;
    max-width: 178px !important;
    gap: 7px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .vidas-info,
  html body.gameplay-active #barra-superior#barra-superior .puntos-nivel {
    min-height: 46px !important;
    font-size: 16px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .puntos-nivel {
    min-width: 48px !important;
  }

  html body.gameplay-active #exit-game-btn#exit-game-btn {
    min-width: 70px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 13px !important;
    font-size: 15px !important;
  }
}

/* Gameplay mobile-first layout: purpose-built mobile UI, not desktop compression. */
@media (max-width: 768px) {
  html body.gameplay-active {
    min-height: 100svh !important;
    overflow-x: hidden !important;
    background: #0b6d8f !important;
  }

  html body.gameplay-active::before {
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    background: url("estadi.jpg") center center / cover no-repeat !important;
    filter: saturate(1.18) contrast(1.04) brightness(1.08) !important;
    transform: none !important;
  }

  html body.gameplay-active::after {
    background:
      linear-gradient(180deg, rgba(0, 176, 220, 0.06), rgba(0, 40, 56, 0.08)),
      linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.12) 100%) !important;
  }

  html body.gameplay-active .container {
    width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: max(14px, env(safe-area-inset-top)) 0 18px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body.gameplay-active #barra-superior#barra-superior {
    position: relative !important;
    inset: auto !important;
    width: min(calc(100vw - 18px), 460px) !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 10px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: visible !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .barra-izquierda {
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 7px !important;
    row-gap: 5px !important;
    align-items: center !important;
    justify-content: start !important;
    margin: 0 !important;
  }

  html body.gameplay-active #gameplay-crest#gameplay-crest {
    grid-row: 1 / 3 !important;
    width: 36px !important;
    height: 36px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .nivel-texto {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .player-info {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: min(74px, 100%) !important;
    min-width: 0 !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .nivel-bar-wrap,
  html body.gameplay-active #barra-superior#barra-superior .nivel-bar {
    width: 74px !important;
    max-width: 100% !important;
    height: 7px !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    justify-self: center !important;
    width: 56px !important;
    height: 56px !important;
    padding: 5px !important;
    margin: 0 !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap::before {
    inset: 8px !important;
  }

  html body.gameplay-active #timer-seconds-label#timer-seconds-label {
    font-size: 17px !important;
    line-height: 1 !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .barra-derecha {
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(58px, auto) minmax(62px, auto) !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .vidas-info,
  html body.gameplay-active #barra-superior#barra-superior .puntos-nivel {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .vidas-info {
    gap: 5px !important;
    min-width: 38px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .puntos-nivel {
    min-width: 52px !important;
  }

  html body.gameplay-active #exit-game-btn#exit-game-btn {
    min-width: 62px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  html body.gameplay-active #quiz-screen#quiz-screen {
    width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.gameplay-active #game-panel#game-panel {
    width: min(calc(100vw - 18px), 460px) !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: 14px 14px 16px !important;
    gap: 12px !important;
    border-radius: 0 0 16px 16px !important;
    overflow: visible !important;
  }

  html body.gameplay-active #question-container#question-container {
    padding: 0 4px !important;
    margin: 0 !important;
  }

  html body.gameplay-active #question-container .badges-row {
    margin: 0 0 10px !important;
  }

  html body.gameplay-active #question#question {
    max-width: 100% !important;
    font-size: clamp(16px, 4.3vw, 20px) !important;
    line-height: 1.25 !important;
    text-wrap: balance !important;
  }

  html body.gameplay-active #question-image-wrap#question-image-wrap:not(.hidden) {
    max-width: min(100%, 260px) !important;
    margin: 10px auto 0 !important;
  }

  html body.gameplay-active #answers-grid#answers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html body.gameplay-active .answer-btn.answer-btn {
    min-height: 58px !important;
    padding: 10px 8px !important;
    font-size: clamp(13px, 3.7vw, 16px) !important;
    line-height: 1.18 !important;
    border-radius: 13px !important;
  }

  html body.gameplay-active #game-panel #controls {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 2px 0 0 !important;
  }

  html body.gameplay-active #game-panel #comodin-5050,
  html body.gameplay-active #game-panel #comodin-saltar {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }
}

@media (max-width: 480px) {
  html body.gameplay-active .container {
    padding-top: max(96px, env(safe-area-inset-top)) !important;
  }

  html body.gameplay-active #barra-superior#barra-superior,
  html body.gameplay-active #game-panel#game-panel {
    width: min(calc(100vw - 20px), 390px) !important;
  }

  html body.gameplay-active #barra-superior#barra-superior {
    height: 82px !important;
    min-height: 82px !important;
    grid-template-columns: minmax(96px, 1fr) 54px minmax(126px, 1fr) !important;
    gap: 6px !important;
    padding: 10px 9px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .barra-izquierda {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    column-gap: 6px !important;
  }

  html body.gameplay-active #gameplay-crest#gameplay-crest {
    width: 32px !important;
    height: 32px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .nivel-texto {
    font-size: 10.5px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .nivel-bar-wrap,
  html body.gameplay-active #barra-superior#barra-superior .nivel-bar {
    width: 66px !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap {
    width: 52px !important;
    height: 52px !important;
    padding: 4px !important;
  }

  html body.gameplay-active #timer-seconds-label#timer-seconds-label {
    font-size: 16px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .barra-derecha {
    grid-template-columns: minmax(24px, auto) minmax(46px, auto) minmax(58px, auto) !important;
    gap: 5px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .vidas-info,
  html body.gameplay-active #barra-superior#barra-superior .puntos-nivel {
    min-height: 44px !important;
    font-size: 13px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .puntos-nivel {
    min-width: 46px !important;
  }

  html body.gameplay-active #exit-game-btn#exit-game-btn {
    min-width: 58px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  html body.gameplay-active #game-panel#game-panel {
    padding: 13px 12px 15px !important;
  }
}

@media (max-width: 360px) {
  html body.gameplay-active #barra-superior#barra-superior {
    grid-template-columns: minmax(82px, 1fr) 50px minmax(112px, 1fr) !important;
    gap: 4px !important;
    padding-inline: 7px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .nivel-texto {
    font-size: 9.5px !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap {
    width: 48px !important;
    height: 48px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .barra-derecha {
    gap: 4px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .vidas-info,
  html body.gameplay-active #barra-superior#barra-superior .puntos-nivel {
    font-size: 12px !important;
  }

  html body.gameplay-active #exit-game-btn#exit-game-btn {
    min-width: 54px !important;
    padding-inline: 8px !important;
    font-size: 12px !important;
  }
}

/* Split gameplay HUDs: desktop and mobile are independent structures. */
#barra-superior-desktop {
  display: contents;
}

#barra-superior-mobile {
  display: none;
}

@media (min-width: 768px) {
  #barra-superior-mobile {
    display: none !important;
  }
}

@media (max-width: 767px) {
  html body.gameplay-active #barra-superior#barra-superior {
    display: none !important;
  }

  html body.gameplay-active #barra-superior-mobile:not(.hidden) {
    width: min(calc(100vw - 20px), 430px);
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid rgba(132, 218, 255, 0.42);
    border-radius: 18px;
    background:
      radial-gradient(circle at 50% -20%, rgba(90, 205, 255, 0.22), transparent 48%),
      linear-gradient(180deg, rgba(5, 34, 58, 0.72), rgba(2, 18, 38, 0.62));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 16px 34px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(10px) saturate(1.18);
    -webkit-backdrop-filter: blur(10px) saturate(1.18);
  }

  html body.gameplay-active .container {
    width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0 !important;
    padding: max(14px, env(safe-area-inset-top)) 0 16px !important;
    overflow: visible !important;
  }

  html body.gameplay-active .hud-mobile-row {
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }

  html body.gameplay-active .hud-mobile-top {
    justify-content: space-between;
    gap: 12px;
  }

  html body.gameplay-active .hud-mobile-round {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(248, 252, 255, 0.98);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  html body.gameplay-active #gameplay-crest-mobile {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    object-fit: contain;
    filter:
      drop-shadow(0 5px 10px rgba(0, 0, 0, 0.34))
      drop-shadow(0 0 8px rgba(91, 197, 255, 0.18));
  }

  html body.gameplay-active #exit-game-btn-mobile {
    min-width: 86px;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid rgba(144, 218, 255, 0.42);
    border-radius: 999px;
    background: rgba(3, 18, 35, 0.58);
    color: rgba(248, 252, 255, 0.98);
    font-size: 16px;
    font-weight: 950;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  html body.gameplay-active .hud-mobile-timer-row {
    justify-content: center;
    padding: 2px 0;
  }

  html body.gameplay-active #timer-bar-wrap-mobile {
    position: relative;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
      conic-gradient(#38baff calc(var(--timer-pct, 1) * 1turn), rgba(97, 174, 225, 0.22) 0);
    box-shadow:
      inset 0 0 0 1px rgba(165, 227, 255, 0.26),
      0 0 18px rgba(56, 186, 255, 0.22),
      0 8px 20px rgba(0, 0, 0, 0.26);
  }

  html body.gameplay-active #timer-bar-wrap-mobile::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 0%, rgba(91, 204, 255, 0.24), transparent 54%),
      #031421;
  }

  html body.gameplay-active #timer-seconds-label-mobile {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 22px;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
  }

  html body.gameplay-active #timer-bar-mobile {
    display: none;
  }

  html body.gameplay-active .hud-mobile-stats {
    justify-content: space-between;
    gap: 12px;
  }

  html body.gameplay-active #vidas-externas-mobile,
  html body.gameplay-active #puntos-nivel-mobile {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid rgba(144, 218, 255, 0.28);
    border-radius: 999px;
    background: rgba(3, 18, 35, 0.38);
    color: rgba(248, 252, 255, 0.98);
    font-size: 17px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
  }

  html body.gameplay-active #vidas-externas-mobile {
    justify-content: flex-start;
    min-width: 116px;
    gap: 8px;
  }

  html body.gameplay-active #puntos-nivel-mobile {
    justify-content: flex-end;
    min-width: 116px;
  }

  html body.gameplay-active #quiz-screen#quiz-screen {
    width: 100% !important;
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    padding: 10px 0 0 !important;
    overflow: visible !important;
  }

  html body.gameplay-active #game-panel#game-panel {
    width: min(calc(100vw - 20px), 430px) !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 14px 14px 16px !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 480px) {
  html body.gameplay-active #barra-superior-mobile:not(.hidden),
  html body.gameplay-active #game-panel#game-panel {
    width: calc(100vw - 18px) !important;
  }

  html body.gameplay-active #barra-superior-mobile:not(.hidden) {
    padding: 11px;
    gap: 9px;
  }

  html body.gameplay-active .hud-mobile-round {
    gap: 8px;
    font-size: 14px;
  }

  html body.gameplay-active #gameplay-crest-mobile {
    width: 38px;
    height: 38px;
  }

  html body.gameplay-active #exit-game-btn-mobile {
    min-width: 78px;
    min-height: 46px;
    padding-inline: 15px;
    font-size: 15px;
  }

  html body.gameplay-active #timer-bar-wrap-mobile {
    width: 70px;
    height: 70px;
  }

  html body.gameplay-active #timer-seconds-label-mobile {
    font-size: 20px;
  }

  html body.gameplay-active #vidas-externas-mobile,
  html body.gameplay-active #puntos-nivel-mobile {
    min-width: 104px;
    min-height: 44px;
    padding-inline: 12px;
    font-size: 15px;
  }
}

/* Dedicated mobile gameplay layout.
   Desktop gameplay stays above; phones get their own app-like structure. */
@media (max-width: 767px) {
  html body.gameplay-active {
    height: 100dvh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  html body.gameplay-active::before {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    background: url("estadi.jpg") center 42% / cover no-repeat !important;
    filter: saturate(1.05) contrast(1.02) brightness(0.78) !important;
    transform: none !important;
  }

  html body.gameplay-active::after {
    background:
      linear-gradient(180deg, rgba(1, 10, 22, 0.68), rgba(1, 10, 22, 0.5) 34%, rgba(1, 10, 22, 0.74)) !important;
  }

  html body.gameplay-active #barra-superior#barra-superior,
  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap {
    display: none !important;
  }

  html body.gameplay-active .container {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 0 0 max(8px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  html body.gameplay-active #barra-superior-mobile:not(.hidden) {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: max(5px, env(safe-area-inset-top)) 12px 6px !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    gap: 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(132, 218, 255, 0.28) !important;
    background:
      linear-gradient(180deg, rgba(4, 24, 43, 0.96), rgba(2, 14, 28, 0.9)) !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(12px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
  }

  html body.gameplay-active .hud-mobile-row {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  html body.gameplay-active .hud-mobile-top {
    min-height: 28px !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  html body.gameplay-active .hud-mobile-round {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(248, 252, 255, 0.98) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  html body.gameplay-active #gameplay-crest-mobile {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    object-fit: contain !important;
  }

  html body.gameplay-active #exit-game-btn-mobile {
    flex: 0 0 auto !important;
    min-width: 62px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(144, 218, 255, 0.36) !important;
    border-radius: 999px !important;
    background: rgba(3, 18, 35, 0.62) !important;
    color: rgba(248, 252, 255, 0.98) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  html body.gameplay-active .hud-mobile-timer-row {
    min-height: 38px !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  html body.gameplay-active #timer-bar-wrap-mobile {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background:
      conic-gradient(#38baff calc(var(--timer-pct, 1) * 1turn), rgba(97, 174, 225, 0.2) 0) !important;
    box-shadow:
      inset 0 0 0 1px rgba(165, 227, 255, 0.24),
      0 0 12px rgba(56, 186, 255, 0.16) !important;
    transform: none !important;
  }

  html body.gameplay-active #timer-bar-wrap-mobile::before {
    content: "" !important;
    position: absolute !important;
    inset: 5px !important;
    border-radius: 50% !important;
    background: #031421 !important;
  }

  html body.gameplay-active #timer-seconds-label-mobile {
    position: relative !important;
    z-index: 1 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }

  html body.gameplay-active #timer-bar-mobile {
    display: none !important;
  }

  html body.gameplay-active .hud-mobile-stats {
    min-height: 28px !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  html body.gameplay-active #vidas-externas-mobile,
  html body.gameplay-active #puntos-nivel-mobile {
    min-width: 0 !important;
    min-height: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border: 1px solid rgba(144, 218, 255, 0.24) !important;
    border-radius: 999px !important;
    background: rgba(3, 18, 35, 0.38) !important;
    color: rgba(248, 252, 255, 0.98) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.gameplay-active #vidas-externas-mobile {
    flex: 0 1 auto !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  html body.gameplay-active #puntos-nivel-mobile {
    flex: 0 1 auto !important;
    justify-content: flex-end !important;
  }

  html body.gameplay-active #quiz-screen#quiz-screen {
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    height: auto !important;
    display: block !important;
    flex: 1 1 auto !important;
    padding: 8px 12px 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body.gameplay-active #game-panel#game-panel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 0 !important;
    padding: 10px 10px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(180deg, rgba(4, 18, 34, 0.72), rgba(2, 11, 24, 0.68)) !important;
    box-shadow: none !important;
    backdrop-filter: blur(4px) !important;
  }

  html body.gameplay-active #question-container#question-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 11px 11px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  html body.gameplay-active #question-container .badges-row {
    margin: 0 0 6px !important;
    gap: 6px !important;
  }

  html body.gameplay-active #question#question {
    max-width: none !important;
    width: 100% !important;
    font-size: 16px !important;
    line-height: 1.22 !important;
    font-weight: 850 !important;
    text-align: left !important;
  }

  html body.gameplay-active #question-image-wrap#question-image-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 8px auto 0 !important;
    border-radius: 12px !important;
    background: rgba(1, 8, 18, 0.48) !important;
  }

  html body.gameplay-active #question-image#question-image {
    width: 100% !important;
    height: auto !important;
    max-height: 22dvh !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  html body.gameplay-active #answers-grid#answers-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  html body.gameplay-active .answer-btn.answer-btn {
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.22 !important;
    text-align: center !important;
    transform: none !important;
  }

  html body.gameplay-active #game-panel #controls {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  html body.gameplay-active #game-panel #comodin-5050,
  html body.gameplay-active #game-panel #comodin-saltar {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 380px) {
  html body.gameplay-active #barra-superior-mobile:not(.hidden) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body.gameplay-active #quiz-screen#quiz-screen {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 6px !important;
  }

  html body.gameplay-active #question#question {
    font-size: 15px !important;
  }

  html body.gameplay-active .answer-btn.answer-btn {
    min-height: 46px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
  }
}

/* Mobile gameplay: same visual identity as desktop, compacted for phone width. */
@media (max-width: 767px) {
  html body.gameplay-active {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body.gameplay-active::before {
    inset: -4px !important;
    width: auto !important;
    height: auto !important;
    background: url("estadi.jpg") center 48% / cover no-repeat !important;
    filter: blur(0.25px) saturate(1.18) contrast(1.04) brightness(1.04) !important;
    transform: scale(1.002) !important;
    opacity: 1 !important;
  }

  html body.gameplay-active::after {
    background:
      radial-gradient(circle at 50% 26%, rgba(120, 218, 255, 0.16), transparent 34%),
      radial-gradient(circle at 50% 64%, rgba(68, 180, 92, 0.15), transparent 40%),
      linear-gradient(180deg, rgba(1, 8, 18, 0.28), rgba(1, 8, 18, 0.56)) !important;
  }

  html body.gameplay-active .container {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: max(8px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom)) !important;
    overflow: visible !important;
  }

  html body.gameplay-active #barra-superior-mobile {
    display: none !important;
  }

  html body.gameplay-active #barra-superior#barra-superior {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: min(calc(100vw - 16px), 620px) !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin: 0 auto !important;
    padding: 7px 8px !important;
    display: grid !important;
    grid-template-columns: minmax(112px, 1fr) 42px minmax(126px, 1fr) !important;
    align-items: center !important;
    gap: 5px !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    border: 1px solid rgba(82, 185, 255, 0.42) !important;
    background:
      radial-gradient(circle at 50% -24%, rgba(82, 193, 255, 0.22), transparent 44%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 36%),
      linear-gradient(180deg, rgba(7, 28, 48, 0.86), rgba(2, 9, 20, 0.84)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 14px 30px rgba(0, 0, 0, 0.34),
      0 0 18px rgba(37, 157, 255, 0.1) !important;
    backdrop-filter: blur(13px) !important;
  }

  html body.gameplay-active #barra-superior-desktop {
    display: contents !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .barra-izquierda {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 6px !important;
    row-gap: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html body.gameplay-active #gameplay-crest {
    grid-row: 1 / 3 !important;
    width: 30px !important;
    height: 30px !important;
    display: block !important;
    object-fit: contain !important;
  }

  html body.gameplay-active #barra-superior .jugador-nombre,
  html body.gameplay-active #barra-superior .player-name {
    display: none !important;
  }

  html body.gameplay-active #barra-superior .nivel-texto {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: rgba(245, 251, 255, 0.96) !important;
    font-size: 9.5px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
  }

  html body.gameplay-active #barra-superior .player-info {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 64px !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  html body.gameplay-active #barra-superior .nivel-bar-wrap {
    width: 64px !important;
    height: 6px !important;
    display: block !important;
    margin: 0 !important;
    font-size: 0 !important;
  }

  html body.gameplay-active #barra-superior .nivel-label,
  html body.gameplay-active #barra-superior .nivel-percent {
    display: none !important;
  }

  html body.gameplay-active #barra-superior .nivel-bar {
    width: 64px !important;
    height: 6px !important;
    border-radius: 999px !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    justify-self: center !important;
    width: 42px !important;
    height: 42px !important;
    flex: none !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap::before {
    inset: 6px !important;
  }

  html body.gameplay-active #timer-seconds-label {
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .barra-derecha {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html body.gameplay-active #barra-superior .vidas-info,
  html body.gameplay-active #barra-superior .puntos-nivel {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(241, 249, 255, 0.96) !important;
    font-size: 9.5px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.gameplay-active #exit-game-btn {
    flex: 0 0 auto !important;
    min-width: 38px !important;
    width: auto !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    font-size: 9.5px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.gameplay-active #quiz-screen#quiz-screen {
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  html body.gameplay-active #game-panel#game-panel {
    width: min(calc(100vw - 16px), 620px) !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    padding: 11px 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    border: 1px solid rgba(80, 184, 255, 0.46) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 50% -8%, rgba(110, 212, 255, 0.18), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 42%),
      linear-gradient(180deg, rgba(6, 27, 47, 0.84), rgba(1, 8, 18, 0.82)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 18px 40px rgba(0, 0, 0, 0.42),
      0 0 22px rgba(37, 157, 255, 0.12) !important;
    backdrop-filter: blur(14px) !important;
    box-sizing: border-box !important;
  }

  html body.gameplay-active #question-container#question-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 9px 10px 10px !important;
    border: 1px solid rgba(80, 184, 255, 0.22) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(4, 19, 35, 0.62), rgba(1, 8, 18, 0.34)) !important;
    box-sizing: border-box !important;
  }

  html body.gameplay-active #question-container .badges-row {
    margin: 0 0 6px !important;
    gap: 5px !important;
  }

  html body.gameplay-active .categoria-badge,
  html body.gameplay-active .dificultad-badge,
  html body.gameplay-active .reto-mode-badge {
    font-size: 9px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
  }

  html body.gameplay-active #question#question {
    width: 100% !important;
    max-width: none !important;
    font-size: 15px !important;
    line-height: 1.22 !important;
    font-weight: 850 !important;
    text-align: left !important;
  }

  html body.gameplay-active #question-image-wrap#question-image-wrap {
    width: 100% !important;
    max-width: 190px !important;
    margin: 7px auto 0 !important;
    border-radius: 12px !important;
  }

  html body.gameplay-active #question-image#question-image {
    width: 100% !important;
    height: auto !important;
    max-height: 24dvh !important;
    object-fit: contain !important;
  }

  html body.gameplay-active #answers-grid#answers-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
  }

  html body.gameplay-active .answer-btn.answer-btn {
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 8px 7px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.16 !important;
    text-align: center !important;
    transform: none !important;
  }

  html body.gameplay-active #game-panel #controls {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  html body.gameplay-active #game-panel #comodin-5050,
  html body.gameplay-active #game-panel #comodin-saltar {
    width: auto !important;
    min-width: 72px !important;
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 380px) {
  html body.gameplay-active #barra-superior#barra-superior {
    width: calc(100vw - 12px) !important;
    grid-template-columns: minmax(104px, 1fr) 38px minmax(118px, 1fr) !important;
    gap: 4px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap {
    width: 38px !important;
    height: 38px !important;
  }

  html body.gameplay-active #barra-superior .vidas-info {
    display: none !important;
  }

  html body.gameplay-active #game-panel#game-panel {
    width: calc(100vw - 12px) !important;
    padding: 10px 8px 11px !important;
  }

  html body.gameplay-active #question#question {
    font-size: 14px !important;
  }

  html body.gameplay-active .answer-btn.answer-btn {
    min-height: 45px !important;
    padding: 7px 6px !important;
    font-size: 12px !important;
  }
}

/* Target mobile look: match reference B using the stable gameplay HUD. */
@media (max-width: 767px) {
  #barra-superior-mobile {
    display: none !important;
  }

  html body.gameplay-active #barra-superior#barra-superior {
    width: min(calc(100vw - 28px), 620px) !important;
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    margin: 28px auto 0 !important;
    padding: 18px 22px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 112px minmax(72px, 1fr) !important;
    grid-template-rows: 40px 58px 18px !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 3px !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid rgba(101, 196, 255, 0.38) !important;
    background:
      radial-gradient(circle at 50% -24%, rgba(83, 194, 255, 0.28), transparent 54%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 42%),
      linear-gradient(180deg, rgba(5, 28, 50, 0.94), rgba(1, 10, 24, 0.92)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      0 16px 34px rgba(0, 0, 0, 0.34),
      0 0 20px rgba(44, 177, 255, 0.12) !important;
    backdrop-filter: blur(16px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
  }

  html body.gameplay-active #barra-superior-desktop,
  html body.gameplay-active #barra-superior#barra-superior .barra-derecha {
    display: contents !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .barra-izquierda {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    height: 40px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-rows: 18px 8px !important;
    align-content: center !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html body.gameplay-active #gameplay-crest {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
    filter:
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.32))
      drop-shadow(0 0 7px rgba(91, 197, 255, 0.18)) !important;
  }

  html body.gameplay-active #barra-superior .jugador-nombre,
  html body.gameplay-active #barra-superior .player-name,
  html body.gameplay-active #barra-superior .nivel-label,
  html body.gameplay-active #barra-superior .nivel-percent {
    display: none !important;
  }

  html body.gameplay-active #barra-superior .nivel-texto {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: rgba(249, 253, 255, 0.98) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
  }

  html body.gameplay-active #barra-superior .player-info {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: min(86px, 100%) !important;
    height: 8px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  html body.gameplay-active #barra-superior .nivel-bar-wrap,
  html body.gameplay-active #barra-superior .nivel-bar {
    width: 100% !important;
    height: 6px !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 999px !important;
  }

  html body.gameplay-active #barra-superior .nivel-bar {
    border: 1px solid rgba(112, 187, 235, 0.22) !important;
    background: rgba(112, 187, 235, 0.16) !important;
  }

  html body.gameplay-active #barra-superior .nivel-fill {
    height: 100% !important;
    display: block !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #19c8ff, #6ee4ff) !important;
  }

  html body.gameplay-active #barra-superior .vidas-info {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 112px !important;
    min-width: 112px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 1px solid rgba(119, 203, 255, 0.35) !important;
    border-radius: 999px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12), transparent 54%),
      linear-gradient(180deg, rgba(8, 40, 70, 0.96), rgba(3, 17, 36, 0.9)) !important;
    color: #9fe0ff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 7px 14px rgba(0, 0, 0, 0.23) !important;
  }

  html body.gameplay-active #barra-superior .vidas-extra-badge {
    margin-left: 3px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #ffd85f, #f2a51c) !important;
    color: #211403 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  html body.gameplay-active #exit-game-btn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: 66px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(119, 203, 255, 0.3) !important;
    border-radius: 999px !important;
    background: rgba(3, 17, 34, 0.62) !important;
    color: rgba(248, 252, 255, 0.96) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap {
    grid-column: 1 / 4 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    position: relative !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 5px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    transform: none !important;
    background:
      conic-gradient(#32bbff calc(var(--timer-pct, 1) * 1turn), rgba(96, 177, 230, 0.2) 0) !important;
    box-shadow:
      inset 0 0 0 1px rgba(178, 234, 255, 0.22),
      0 0 13px rgba(56, 186, 255, 0.2),
      0 7px 15px rgba(0, 0, 0, 0.24) !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap::before {
    content: "" !important;
    position: absolute !important;
    inset: 9px !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(91, 204, 255, 0.16), transparent 56%),
      #031421 !important;
  }

  html body.gameplay-active #timer-seconds-label {
    position: relative !important;
    z-index: 1 !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  }

  html body.gameplay-active #timer-bar {
    display: none !important;
  }

  html body.gameplay-active #barra-superior .puntos-nivel {
    grid-column: 1 / 4 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    align-self: center !important;
    min-width: 0 !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 8px !important;
    display: block !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(236, 247, 255, 0.9) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 18px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body.gameplay-active #quiz-screen#quiz-screen {
    padding-top: 26px !important;
  }

  html body.gameplay-active #game-panel#game-panel {
    width: min(calc(100vw - 44px), 620px) !important;
    padding: 24px 22px 18px !important;
    gap: 18px !important;
    border-radius: 20px !important;
  }

  html body.gameplay-active #question-container#question-container {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body.gameplay-active #question-container .badges-row {
    margin: 0 0 24px !important;
  }

  html body.gameplay-active .categoria-badge {
    font-size: 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #2fb2ff !important;
  }

  html body.gameplay-active #question#question {
    font-size: 21px !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
  }

  html body.gameplay-active #answers-grid#answers-grid {
    gap: 14px !important;
  }

  html body.gameplay-active .answer-btn.answer-btn {
    min-height: 78px !important;
    padding: 13px 12px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
    line-height: 1.18 !important;
  }

  html body.gameplay-active #game-panel #controls {
    gap: 14px !important;
  }

  html body.gameplay-active #game-panel #comodin-5050,
  html body.gameplay-active #game-panel #comodin-saltar {
    flex: 1 1 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
    font-size: 17px !important;
  }
}

@media (max-width: 430px) {
  html body.gameplay-active #barra-superior#barra-superior {
    width: calc(100vw - 16px) !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    margin-top: 8px !important;
    padding: 9px 12px 7px !important;
    grid-template-columns: minmax(0, 1fr) 72px minmax(50px, 1fr) !important;
    grid-template-rows: 30px 38px 12px !important;
    column-gap: 8px !important;
    row-gap: 1px !important;
    border-radius: 16px !important;
  }

  html body.gameplay-active #barra-superior#barra-superior .barra-izquierda {
    height: 30px !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    grid-template-rows: 12px 6px !important;
    column-gap: 6px !important;
    row-gap: 4px !important;
  }

  html body.gameplay-active #gameplay-crest {
    width: 26px !important;
    height: 26px !important;
  }

  html body.gameplay-active #barra-superior .nivel-texto {
    font-size: 10px !important;
  }

  html body.gameplay-active #barra-superior .player-info {
    width: 58px !important;
    height: 6px !important;
  }

  html body.gameplay-active #barra-superior .vidas-info {
    width: 72px !important;
    min-width: 72px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 7px !important;
    font-size: 13px !important;
    gap: 3px !important;
  }

  html body.gameplay-active #barra-superior .vidas-extra-badge {
    padding: 2px 5px !important;
    font-size: 8px !important;
  }

  html body.gameplay-active #exit-game-btn {
    min-width: 50px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 3px !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap::before {
    inset: 6px !important;
  }

  html body.gameplay-active #timer-seconds-label {
    font-size: 13px !important;
  }

  html body.gameplay-active #barra-superior .puntos-nivel {
    height: 12px !important;
    min-height: 12px !important;
    font-size: 10px !important;
    line-height: 12px !important;
  }

  html body.gameplay-active #quiz-screen#quiz-screen {
    padding-top: 198px !important;
  }

  html body.gameplay-active #game-panel#game-panel {
    width: calc(100vw - 16px) !important;
    padding: 12px 12px 13px !important;
    gap: 10px !important;
    border-radius: 16px !important;
  }

  html body.gameplay-active #question-container .badges-row {
    margin-bottom: 20px !important;
  }

  html body.gameplay-active .categoria-badge {
    font-size: 16px !important;
  }

  html body.gameplay-active #question#question {
    font-size: 16px !important;
    line-height: 1.22 !important;
    margin-bottom: 8px !important;
  }

  html body.gameplay-active #answers-grid#answers-grid {
    gap: 8px !important;
  }

  html body.gameplay-active .answer-btn.answer-btn {
    min-height: 57px !important;
    padding: 9px 8px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  html body.gameplay-active #game-panel #controls {
    gap: 8px !important;
  }

  html body.gameplay-active #game-panel #comodin-5050,
  html body.gameplay-active #game-panel #comodin-saltar {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
  }
}

/* Mobile visual continuity: HUD and gameplay should read as one compact unit. */
@media (max-width: 430px) {
  html body.gameplay-active #barra-superior#barra-superior {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
    margin-top: 10px !important;
    padding: 11px 13px 9px !important;
    grid-template-columns: minmax(0, 1fr) 78px minmax(54px, 1fr) !important;
    grid-template-rows: 32px 48px 14px !important;
    row-gap: 3px !important;
    border-radius: 18px !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    align-self: center !important;
  }

  html body.gameplay-active #timer-bar-wrap#timer-bar-wrap::before {
    inset: 8px !important;
  }

  html body.gameplay-active #timer-seconds-label {
    font-size: 16px !important;
  }

  html body.gameplay-active #barra-superior .puntos-nivel {
    height: 14px !important;
    min-height: 14px !important;
    font-size: 11px !important;
    line-height: 14px !important;
  }

  html body.gameplay-active #quiz-screen#quiz-screen {
    padding-top: 8px !important;
  }

  html body.gameplay-active #game-panel#game-panel {
    margin-top: 0 !important;
  }
}

/* Unified mobile game card: HUD lives inside #game-panel with question/answers/helpers. */
@media (max-width: 767px) {
  html body.gameplay-active #barra-superior#barra-superior {
    display: none !important;
  }

  html body.gameplay-active #quiz-screen#quiz-screen {
    padding: 10px 8px 0 !important;
  }

  html body.gameplay-active #game-panel#game-panel {
    width: min(calc(100vw - 16px), 620px) !important;
    margin: 0 auto !important;
    padding: 12px 12px 13px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    border: 1px solid rgba(80, 184, 255, 0.46) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 50% -8%, rgba(110, 212, 255, 0.18), transparent 42%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 42%),
      linear-gradient(180deg, rgba(6, 27, 47, 0.9), rgba(1, 8, 18, 0.86)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 18px 40px rgba(0, 0, 0, 0.42),
      0 0 22px rgba(37, 157, 255, 0.12) !important;
    backdrop-filter: blur(14px) !important;
    box-sizing: border-box !important;
  }

  html body.gameplay-active #game-panel > #barra-superior-mobile:not(.hidden) {
    order: -10 !important;
    position: static !important;
    width: 100% !important;
    min-height: 112px !important;
    margin: 0 !important;
    padding: 0 2px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html body.gameplay-active #barra-superior-mobile .hud-mobile-top {
    width: 100% !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  html body.gameplay-active #barra-superior-mobile .hud-mobile-round {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body.gameplay-active #gameplay-crest-mobile {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    object-fit: contain !important;
  }

  html body.gameplay-active #nivel-texto-mobile {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: rgba(249, 253, 255, 0.98) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  html body.gameplay-active #exit-game-btn-mobile {
    flex: 0 0 auto !important;
    min-width: 56px !important;
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(119, 203, 255, 0.3) !important;
    border-radius: 999px !important;
    background: rgba(3, 17, 34, 0.62) !important;
    color: rgba(248, 252, 255, 0.96) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  html body.gameplay-active #barra-superior-mobile .hud-mobile-timer-row {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  html body.gameplay-active #timer-bar-wrap-mobile {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    margin: 0 !important;
    padding: 4px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background:
      conic-gradient(#32bbff calc(var(--timer-pct, 1) * 1turn), rgba(96, 177, 230, 0.2) 0) !important;
    box-shadow:
      inset 0 0 0 1px rgba(178, 234, 255, 0.22),
      0 0 10px rgba(56, 186, 255, 0.18),
      0 7px 14px rgba(0, 0, 0, 0.22) !important;
  }

  html body.gameplay-active #timer-bar-wrap-mobile::before {
    content: "" !important;
    position: absolute !important;
    inset: 8px !important;
    border-radius: 50% !important;
    background: #031421 !important;
  }

  html body.gameplay-active #timer-seconds-label-mobile {
    position: relative !important;
    z-index: 1 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }

  html body.gameplay-active #timer-bar-mobile {
    display: none !important;
  }

  html body.gameplay-active #barra-superior-mobile .hud-mobile-stats {
    width: 100% !important;
    min-height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  html body.gameplay-active #vidas-externas-mobile,
  html body.gameplay-active #puntos-nivel-mobile {
    width: auto !important;
    min-width: 0 !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(236, 247, 255, 0.92) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.gameplay-active #vidas-externas-mobile {
    color: #9fe0ff !important;
    font-size: 15px !important;
    gap: 4px !important;
  }

  html body.gameplay-active #question-container#question-container {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html body.gameplay-active #question-container .badges-row {
    margin: 0 0 14px !important;
  }

  html body.gameplay-active .categoria-badge {
    font-size: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #2fb2ff !important;
  }

  html body.gameplay-active #question#question {
    font-size: 16px !important;
    line-height: 1.22 !important;
  }

  html body.gameplay-active #answers-grid#answers-grid {
    gap: 8px !important;
  }

  html body.gameplay-active .answer-btn.answer-btn {
    min-height: 57px !important;
    padding: 9px 8px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  html body.gameplay-active #game-panel #controls {
    gap: 8px !important;
  }

  html body.gameplay-active #game-panel #comodin-5050,
  html body.gameplay-active #game-panel #comodin-saltar {
    flex: 1 1 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
  }
}

/* Final scoped override: stable SVG lives/bonus above the timer. */
html body #vidas-externas,
html body #vidas-externas-mobile {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

html body #vidas-externas .hud-hearts,
html body #vidas-externas-mobile .hud-hearts {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  line-height: 0 !important;
}

html body #vidas-externas .hud-heart-svg,
html body #vidas-externas-mobile .hud-heart-svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex: 0 0 18px !important;
  fill: #ff4f73 !important;
  filter: drop-shadow(0 0 7px rgba(255, 79, 115, 0.42)) !important;
}

html body #vidas-externas .hud-heart-svg.is-empty,
html body #vidas-externas-mobile .hud-heart-svg.is-empty {
  fill: rgba(150, 169, 188, 0.35) !important;
  filter: none !important;
}

html body #vidas-externas .hud-bonus-xp,
html body #vidas-externas-mobile .hud-bonus-xp {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 20px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(255, 209, 102, 0.45) !important;
  border-radius: 999px !important;
  background: rgba(255, 209, 102, 0.14) !important;
  color: #ffd166 !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

@media (max-width: 767px) {
  html body.gameplay-active #vidas-externas-mobile {
    gap: 7px !important;
  }

  html body.gameplay-active #vidas-externas-mobile .hud-heart-svg {
    width: 16px !important;
    height: 16px !important;
    flex-basis: 16px !important;
  }

  html body.gameplay-active #vidas-externas-mobile .hud-bonus-xp {
    min-height: 18px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
  }
}

/* Professional mobile correction: centering, HUD balance and modal consistency. */
html,
body {
  width: 100%;
  max-width: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

#explicacion-screen,
#continuar-screen,
#ad-screen-round,
#anuncio-overlay,
#reset-modal,
#resultado-final-screen {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#explicacion-panel,
#continuar-panel,
#anuncio-panel,
#resultado-final-panel,
.modal-content {
  width: min(100%, 420px) !important;
  margin-inline: auto !important;
}

#explicacion-panel,
#continuar-panel,
#anuncio-panel,
#resultado-final-panel {
  padding: clamp(22px, 6vw, 32px) clamp(18px, 6vw, 28px) !important;
}

#explicacion-seguir,
#continuar-btn,
#nueva-btn,
#close-ad,
#reset-send-btn,
#reset-cancel-btn,
#resultado-final-inicio-btn,
.resultado-final-acciones button,
.share-btn {
  min-height: 42px;
  border-radius: 22px;
  font-weight: 800;
}

#reset-cancel-btn,
#nueva-btn,
.resultado-final-acciones button:last-child {
  border: 1px solid rgba(44, 124, 196, 0.18);
  background: #eef6ff;
  color: #1e66a3;
}

@media (max-width: 767px) {
  html,
  body {
    overflow-x: clip !important;
  }

  body::before {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    animation: none !important;
    transform: none !important;
    background-position: center center !important;
  }

  html body.gameplay-active #quiz-screen#quiz-screen {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    padding: 10px max(8px, env(safe-area-inset-right)) 14px max(8px, env(safe-area-inset-left)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: hidden !important;
  }

  html body.gameplay-active #game-panel#game-panel {
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 12px !important;
    transform: none !important;
    overflow: hidden !important;
  }

  html body.gameplay-active #game-panel > #barra-superior-mobile:not(.hidden) {
    width: 100% !important;
    min-height: auto !important;
    padding: 0 0 9px !important;
    gap: 8px !important;
  }

  html body.gameplay-active #barra-superior-mobile .hud-mobile-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  html body.gameplay-active #barra-superior-mobile .hud-mobile-round {
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  html body.gameplay-active #nivel-texto-mobile {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.gameplay-active #barra-superior-mobile .hud-mobile-timer-row {
    min-height: 46px !important;
  }

  html body.gameplay-active #timer-bar-wrap-mobile {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  html body.gameplay-active #barra-superior-mobile .hud-mobile-stats {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 24px !important;
  }

  html body.gameplay-active #vidas-externas-mobile,
  html body.gameplay-active #puntos-nivel-mobile {
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body.gameplay-active #question-container#question-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 3px 2px 0 !important;
    text-align: center !important;
  }

  html body.gameplay-active #question-container .badges-row {
    justify-content: center !important;
    gap: 7px !important;
    margin-bottom: 11px !important;
  }

  html body.gameplay-active #categoria-badge,
  html body.gameplay-active .categoria-badge,
  html body.gameplay-active #dificultad-badge,
  html body.gameplay-active .dificultad-badge {
    max-width: 100% !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  html body.gameplay-active #question#question {
    width: 100% !important;
    max-width: 36ch !important;
    margin: 0 auto !important;
    padding-inline: 2px !important;
    text-align: center !important;
    text-wrap: balance;
  }

  html body.gameplay-active #answers-grid#answers-grid,
  html body.gameplay-active #controls {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.gameplay-active .answer-btn.answer-btn {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #explicacion-screen,
  #continuar-screen,
  #ad-screen-round,
  #anuncio-overlay,
  #reset-modal,
  #resultado-final-screen {
    align-items: center !important;
    justify-content: center !important;
    padding: 16px max(14px, env(safe-area-inset-right)) 16px max(14px, env(safe-area-inset-left)) !important;
  }

  #explicacion-panel,
  #continuar-panel,
  #anuncio-panel,
  #resultado-final-panel,
  .modal-content {
    max-width: 390px !important;
  }

  .resultado-final-acciones,
  .share-btns,
  #continuar-botones {
    gap: 9px !important;
  }
}

@media (max-width: 380px) {
  html body.gameplay-active #game-panel#game-panel {
    padding: 10px !important;
  }

  html body.gameplay-active #question#question {
    max-width: 32ch !important;
    font-size: 15px !important;
  }

  html body.gameplay-active .answer-btn.answer-btn {
    min-height: 54px !important;
    font-size: 12px !important;
  }
}

.access-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
}

.access-choice-panel {
  width: min(100%, 380px);
  padding: 28px 24px;
  border-radius: 20px;
  background: #fff;
  color: #22313f;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.34);
}

.access-choice-panel h2 {
  margin: 0 0 10px;
  color: #1a3a5c;
  font-size: 22px;
  font-weight: 900;
}

.access-choice-panel p {
  margin: 0 0 20px;
  color: #5f6f7f;
  font-size: 14px;
  line-height: 1.5;
}

.access-choice-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.access-choice-primary,
.access-choice-secondary,
.access-choice-cancel {
  width: 100%;
  min-height: 44px;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
}

.access-choice-primary {
  background: linear-gradient(135deg, #2c7cc4, #1e66a3);
  color: #fff;
  box-shadow: 0 4px 12px rgba(44, 124, 196, 0.3);
}

.access-choice-secondary,
.access-choice-cancel {
  border: 1px solid rgba(44, 124, 196, 0.18);
  background: #eef6ff;
  color: #1e66a3;
}

.access-choice-cancel {
  margin-top: 10px;
  background: #f3f5f7;
  color: #66727f;
}

.guest-conversion-modal {
  background: rgba(5, 22, 38, 0.72);
}

.guest-conversion-panel {
  border: 1px solid rgba(44, 124, 196, 0.12);
}

/* Main menu visual refresh: arcade football cards matching the reference. */
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .retos-divider {
  display: none !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn { order: 10; }
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario { order: 20; }
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn { order: 30; }
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn { order: 40; }
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn { order: 50; }
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn { order: 60; }
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ads-stats-btn { order: 70; }
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #question-stats-btn { order: 71; }

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn {
  position: relative !important;
  width: min(100%, 390px) !important;
  max-width: calc(100vw - 32px) !important;
  min-height: 62px !important;
  margin: 5px auto !important;
  padding: 0 42px 0 78px !important;
  border-radius: 13px !important;
  border: 2px solid rgba(0, 128, 229, 0.78) !important;
  overflow: hidden !important;
  justify-content: flex-start !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 12% 45%, rgba(15, 134, 255, 0.28), transparent 30%),
    linear-gradient(180deg, rgba(2, 33, 72, 0.96), rgba(0, 12, 31, 0.98)) !important;
  color: #fff !important;
  font-size: clamp(15px, 4.4vw, 19px) !important;
  font-weight: 1000 !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.48),
    0 0 14px rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(123, 205, 255, 0.16),
    inset 0 -16px 34px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(0, 96, 188, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(0, 125, 255, 0.18) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn::before,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario::before,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn::before,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn::before,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn::before {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  animation: none !important;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 12px rgba(49, 178, 255, 0.34));
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn::after,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn::after,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn::after,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 3px solid #40a8ff !important;
  border-right: 3px solid #40a8ff !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: translateY(-50%) rotate(45deg) !important;
  box-shadow: 0 0 12px rgba(64, 168, 255, 0.42) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario::after {
  content: attr(data-today-label) !important;
  position: absolute !important;
  right: 13px !important;
  top: 50% !important;
  width: auto !important;
  height: auto !important;
  padding: 5px 8px !important;
  border: 2px solid rgba(0, 142, 236, 0.72) !important;
  border-radius: 12px !important;
  background: rgba(0, 37, 78, 0.78) !important;
  color: #20b8ff !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 0 12px rgba(32, 184, 255, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 15px rgba(0, 132, 230, 0.18) !important;
  transform: translateY(-50%) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn.btn-desafiar {
  border-color: rgba(0, 128, 229, 0.78) !important;
  background:
    radial-gradient(circle at 12% 45%, rgba(255, 255, 255, 0.18), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(46, 168, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(2, 33, 72, 0.96), rgba(0, 12, 31, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(123, 205, 255, 0.16),
    inset 0 -18px 36px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(0, 96, 188, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.4),
    0 0 28px rgba(0, 125, 255, 0.22) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn.btn-desafiar::after {
  border-color: #2bb8ff !important;
  box-shadow: 0 0 14px rgba(32, 184, 255, 0.54) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn.btn-desafiar::before {
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 12px rgba(49, 178, 255, 0.34));
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn {
  font-size: clamp(14px, 4vw, 17px) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(42, 166, 255, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(153, 217, 255, 0.2),
    inset 0 -16px 34px rgba(0, 0, 0, 0.3),
    0 14px 30px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(0, 136, 255, 0.28) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn.btn-desafiar:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(42, 166, 255, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(153, 217, 255, 0.2),
    inset 0 -18px 36px rgba(0, 0, 0, 0.32),
    0 14px 30px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(0, 136, 255, 0.3) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3CradialGradient id='b' cx='35%25' cy='25%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.23' stop-color='%239de8ff'/%3E%3Cstop offset='.54' stop-color='%231a9fff'/%3E%3Cstop offset='1' stop-color='%230047a5'/%3E%3C/radialGradient%3E%3ClinearGradient id='s' x1='0' x2='1'%3E%3Cstop stop-color='%2305c8ff'/%3E%3Cstop offset='1' stop-color='%230044b8' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 71 34 49M11 55l27-15M18 78l28-20' stroke='url(%23s)' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='55' cy='45' r='27' fill='url(%23b)' stroke='%23dff8ff' stroke-width='2.2'/%3E%3Cpath d='m55 22 10 7-4 12H49l-4-12zM34 44l11-8 8 9-6 10H35zM76 44l-11-8-8 9 6 10h12zM45 65l5-11h11l5 11-10 6z' fill='%23001542' opacity='.9'/%3E%3Cpath d='M31 35c6-14 25-24 41-11' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%23ffffff'/%3E%3Cstop offset='.35' stop-color='%23bfeeff'/%3E%3Cstop offset='1' stop-color='%232b9bff'/%3E%3C/linearGradient%3E%3CradialGradient id='b' cx='34%25' cy='24%25' r='68%25'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='.35' stop-color='%23f8fdff'/%3E%3Cstop offset='1' stop-color='%231f91df'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='11' y='16' width='58' height='58' rx='8' fill='url(%23c)' stroke='%230068c9' stroke-width='3'/%3E%3Cpath d='M11 30h58' stroke='%230074d9' stroke-width='8'/%3E%3Crect x='20' y='43' width='10' height='10' rx='1.5' fill='%230072d8'/%3E%3Crect x='38' y='43' width='10' height='10' rx='1.5' fill='%230072d8'/%3E%3Crect x='20' y='59' width='10' height='10' rx='1.5' fill='%230072d8'/%3E%3Crect x='38' y='59' width='10' height='10' rx='1.5' fill='%230072d8'/%3E%3Crect x='20' y='7' width='8' height='22' rx='4' fill='%23fff' stroke='%23002b55' stroke-width='2'/%3E%3Crect x='51' y='7' width='8' height='22' rx='4' fill='%23fff' stroke='%23002b55' stroke-width='2'/%3E%3Ccircle cx='67' cy='63' r='21' fill='url(%23b)' stroke='%23e9fbff' stroke-width='2'/%3E%3Cpath d='m67 45 8 6-3 9h-10l-3-9zM50 64l9-6 6 7-4 8H51zM84 64l-9-6-6 7 4 8h10zM61 80l4-8h8l4 8-8 5z' fill='%2300123a' opacity='.88'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%2398e4ff'/%3E%3Cstop offset='.5' stop-color='%231d93ff'/%3E%3Cstop offset='1' stop-color='%230047a5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='m48 7 5 11 12 1-9 8 3 12-11-6-11 6 3-12-9-8 12-1z' fill='%23eaf8ff' stroke='%2391dcff' stroke-width='2'/%3E%3Crect x='36' y='38' width='24' height='39' rx='3' fill='url(%23p)' stroke='%23bdefff' stroke-width='2'/%3E%3Crect x='13' y='54' width='23' height='23' rx='3' fill='url(%23p)' stroke='%238bdcff' stroke-width='2'/%3E%3Crect x='60' y='60' width='23' height='17' rx='3' fill='url(%23p)' stroke='%238bdcff' stroke-width='2'/%3E%3Ctext x='48' y='62' text-anchor='middle' font-family='Arial Black,Arial' font-size='24' fill='%23fff'%3E1%3C/text%3E%3Ctext x='24.5' y='71' text-anchor='middle' font-family='Arial Black,Arial' font-size='18' fill='%23fff'%3E2%3C/text%3E%3Ctext x='71.5' y='73' text-anchor='middle' font-family='Arial Black,Arial' font-size='15' fill='%23fff'%3E3%3C/text%3E%3Cpath d='M10 80h76' stroke='%23004191' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23d9d9d9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='30' cy='28' r='14' fill='url(%23w)'/%3E%3Cpath d='M9 74c2-18 10-28 21-28s19 10 21 28z' fill='url(%23w)' stroke='%23bfbfbf' stroke-width='2'/%3E%3Ccircle cx='66' cy='28' r='14' fill='url(%23w)'/%3E%3Cpath d='M45 74c2-18 10-28 21-28s19 10 21 28z' fill='url(%23w)' stroke='%23bfbfbf' stroke-width='2'/%3E%3Ctext x='48' y='67' text-anchor='middle' font-family='Arial Black,Arial' font-size='28' fill='%232db8ff' stroke='%23081422' stroke-width='3' paint-order='stroke'%3EVS%3C/text%3E%3C/svg%3E") center / contain no-repeat !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%23eaf8ff'/%3E%3Cstop offset='.28' stop-color='%236cc9ff'/%3E%3Cstop offset='1' stop-color='%23003488'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M48 8 79 20v22c0 21-13 35-31 45C30 77 17 63 17 42V20z' fill='%2308162d' stroke='%23d8f5ff' stroke-width='3'/%3E%3Cpath d='M48 17 70 26v17c0 15-9 25-22 33-13-8-22-18-22-33V26z' fill='url(%23s)' stroke='%23007be8' stroke-width='3'/%3E%3Cpath d='m48 30 6 12 13 2-10 9 3 13-12-7-12 7 3-13-10-9 13-2z' fill='%23f1fbff' stroke='%23b9ecff' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta {
  position: relative !important;
  width: min(100%, 390px) !important;
  max-width: calc(100vw - 32px) !important;
  min-height: 66px !important;
  margin: 8px auto 5px !important;
  padding: 0 42px 0 78px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 13px !important;
  border: 2px solid rgba(80, 183, 255, 0.68) !important;
  background:
    radial-gradient(circle at 14% 48%, rgba(86, 199, 255, 0.3), transparent 31%),
    radial-gradient(circle at 86% 20%, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(5, 45, 85, 0.96), rgba(0, 15, 35, 0.98)) !important;
  color: #fff !important;
  text-align: left !important;
  text-transform: uppercase !important;
  box-shadow:
    inset 0 1px 0 rgba(157, 225, 255, 0.18),
    inset 0 -16px 34px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 125, 220, 0.24),
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(58, 180, 255, 0.22) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta::before {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 0 !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%23ffffff'/%3E%3Cstop offset='.34' stop-color='%23a7ecff'/%3E%3Cstop offset='1' stop-color='%23106ed3'/%3E%3C/linearGradient%3E%3CradialGradient id='g' cx='38%25' cy='24%25' r='72%25'%3E%3Cstop stop-color='%23ffffff'/%3E%3Cstop offset='.35' stop-color='%2396e6ff'/%3E%3Cstop offset='1' stop-color='%23005db8'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='12' y='25' width='60' height='44' rx='8' fill='url(%23m)' stroke='%23dff8ff' stroke-width='3'/%3E%3Cpath d='M15 30 42 51 69 30M15 65l22-20M69 65 47 45' fill='none' stroke='%23002f70' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' opacity='.82'/%3E%3Ccircle cx='70' cy='61' r='16' fill='url(%23g)' stroke='%23ecfbff' stroke-width='2.5'/%3E%3Ccircle cx='70' cy='56' r='5' fill='%23001642' opacity='.9'/%3E%3Cpath d='M59 72c1-8 5-12 11-12s10 4 11 12' fill='%23001642' opacity='.9'/%3E%3Cpath d='M21 24c8-9 25-11 38-3' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' opacity='.72'/%3E%3C/svg%3E") center / contain no-repeat !important;
  transform: translateY(-50%) !important;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 12px rgba(49, 178, 255, 0.34));
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 3px solid #40a8ff !important;
  border-right: 3px solid #40a8ff !important;
  transform: translateY(-50%) rotate(45deg) !important;
  box-shadow: 0 0 12px rgba(64, 168, 255, 0.42) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(126, 213, 255, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(180, 235, 255, 0.22),
    inset 0 -16px 34px rgba(0, 0, 0, 0.28),
    0 14px 30px rgba(0, 0, 0, 0.4),
    0 0 34px rgba(61, 185, 255, 0.32) !important;
}

.community-question-icon {
  display: none !important;
}

.community-question-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.community-question-title,
.community-question-subtitle {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.community-question-title {
  color: #ffffff;
  font-size: clamp(14px, 4vw, 17px);
  font-weight: 1000;
  line-height: 1.05;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.42),
    0 0 14px rgba(255, 255, 255, 0.16);
}

.community-question-subtitle {
  color: rgba(213, 239, 255, 0.82);
  font-size: clamp(10px, 2.8vw, 12px);
  font-weight: 850;
  line-height: 1.1;
  text-transform: none;
}

@media (max-width: 560px) {
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn {
    min-height: 58px !important;
    margin: 5px auto !important;
    padding: 0 38px 0 72px !important;
    border-radius: 12px !important;
    font-size: clamp(14px, 4.7vw, 18px) !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn::before,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario::before,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn::before,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn::before,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn::before {
    left: 13px !important;
    width: 44px !important;
    height: 44px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn::after,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn::after,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn::after,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn::after {
    right: 16px !important;
    width: 9px !important;
    height: 9px !important;
    border-width: 3px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario::after {
    right: 11px !important;
    padding: 5px 7px !important;
    font-size: 9px !important;
    border-radius: 11px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta {
    min-height: 60px !important;
    margin: 6px auto 5px !important;
    padding: 0 38px 0 72px !important;
    border-radius: 12px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta::before {
    left: 13px !important;
    width: 44px !important;
    height: 44px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta::after {
    right: 16px !important;
    width: 9px !important;
    height: 9px !important;
    border-width: 3px !important;
  }
}

/* Hard compact override for Mis retos cards. */
html body #retos-screen .reto-list-item {
  min-height: 82px !important;
  padding: 10px 10px !important;
  grid-template-columns: 42px minmax(0, 1fr) 126px !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 10px !important;
}

html body #retos-screen .reto-list-avatar {
  width: 38px !important;
  height: 38px !important;
}

html body #retos-screen .reto-list-avatar::before {
  font-size: 18px !important;
}

html body #retos-screen .reto-list-info {
  align-self: center !important;
}

html body #retos-screen .reto-list-codigo {
  font-size: 16px !important;
}

html body #retos-screen .reto-list-meta,
html body #retos-screen .reto-list-status {
  font-size: 11px !important;
}

html body #retos-screen .reto-list-side {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  justify-items: end !important;
}

html body #retos-screen .reto-list-time {
  font-size: 11px !important;
}

html body #retos-screen .reto-list-score {
  font-size: 17px !important;
}

html body #retos-screen .reto-list-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: end !important;
  justify-content: flex-end !important;
  margin-top: 38px !important;
  gap: 6px !important;
}

html body #retos-screen .reto-list-btn {
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
}

@media (max-width: 560px) {
  html body #retos-screen .reto-list-item {
    min-height: 78px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 7px 9px !important;
  }

  html body #retos-screen .reto-list-avatar {
    width: 34px !important;
    height: 34px !important;
  }

  html body #retos-screen .reto-list-side {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    justify-items: start !important;
  }

  html body #retos-screen .reto-list-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    margin-top: 0 !important;
  }
}

/* FINAL STRUCTURE FIX: Mis retos list items. No floating buttons, no empty blocks. */
html body #retos-screen #retos-list {
  gap: 12px !important;
}

html body #retos-screen .reto-list-item {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) max-content !important;
  grid-template-rows: auto auto !important;
  gap: 8px 12px !important;
  align-items: center !important;
  min-height: 116px !important;
  height: auto !important;
  padding: 14px !important;
  overflow: hidden !important;
}

html body #retos-screen .reto-list-avatar {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
  justify-self: center !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
}

html body #retos-screen .reto-list-info {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  align-self: center !important;
}

html body #retos-screen .reto-list-codigo {
  display: block !important;
  max-width: 100% !important;
  font-size: 19px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #retos-screen .reto-list-meta {
  display: block !important;
  max-width: 100% !important;
  margin-top: 4px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #retos-screen .reto-list-status {
  display: block !important;
  max-width: 100% !important;
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #retos-screen .reto-list-side {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  display: grid !important;
  justify-items: end !important;
  gap: 4px !important;
  min-width: max-content !important;
  margin: 0 !important;
}

html body #retos-screen .reto-list-time {
  font-size: 12px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html body #retos-screen .reto-list-score {
  font-size: 18px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body #retos-screen .reto-list-actions {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  align-self: end !important;
  justify-self: start !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
}

html body #retos-screen .reto-list-btn {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

@media (max-width: 560px) {
  html body #retos-screen .reto-list-item {
    grid-template-columns: 44px minmax(0, 1fr) max-content !important;
    gap: 7px 9px !important;
    min-height: 112px !important;
    padding: 12px 10px !important;
  }

  html body #retos-screen .reto-list-avatar {
    width: 40px !important;
    height: 40px !important;
  }

  html body #retos-screen .reto-list-codigo {
    font-size: 17px !important;
  }

  html body #retos-screen .reto-list-meta {
    font-size: 12px !important;
  }

  html body #retos-screen .reto-list-status {
    font-size: 11px !important;
  }

  html body #retos-screen .reto-list-side {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    justify-items: end !important;
  }

  html body #retos-screen .reto-list-actions {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    justify-content: flex-start !important;
    margin-top: 2px !important;
  }

  html body #retos-screen .reto-list-time {
    font-size: 10px !important;
  }

html body #retos-screen .reto-list-btn {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
  }
}

/* Final override: larger visible avatar in the top XP/profile pill. */
html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) {
  grid-template-columns: 40px auto minmax(58px, 86px) auto !important;
  min-height: 46px !important;
  min-width: 170px !important;
  max-width: min(74vw, 232px) !important;
  padding: 4px 9px 4px 4px !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .profile-avatar.avatar-profile-frame,
html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .avatar-profile-frame {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  flex: 0 0 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .avatar-profile-frame .avatar-profile {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
}

@media (max-width: 420px) {
  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) {
    grid-template-columns: 38px auto minmax(42px, 58px) auto !important;
    min-height: 44px !important;
    min-width: 158px !important;
    max-width: calc(100vw - 104px) !important;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .profile-avatar.avatar-profile-frame,
  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .avatar-profile-frame {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex-basis: 36px !important;
  }
}

/* Home header controls: audio and language share one responsive layout context. */
html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: calc(100vw - 28px) !important;
  max-width: 420px !important;
  gap: clamp(8px, 2.5vw, 14px) !important;
  padding-top: max(8px, env(safe-area-inset-top, 8px)) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) {
  grid-column: 1 !important;
  justify-self: end !important;
}

#inicio-screen .home-header-controls {
  grid-column: 2;
  justify-self: end;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(6px, 1.8vw, 9px);
  min-width: 0;
  margin-right: max(0px, env(safe-area-inset-right, 0px));
}

html body #inicio-screen .home-header-controls .audio-toggle-btn {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  width: 42px;
  max-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
  background: rgba(5, 18, 34, 0.78) !important;
  font-size: 20px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24) !important;
}

html body #inicio-screen .home-header-controls .audio-toggle-btn:hover {
  background: rgba(20, 70, 116, 0.88) !important;
  transform: translateY(-1px) !important;
}

html body #inicio-screen .home-header-controls .audio-toggle-btn:active {
  transform: translateY(0) !important;
}

html body #inicio-screen .home-header-controls #lang-selector {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: auto !important;
  margin: 0 !important;
}

@media (max-width: 360px) {
  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top {
    width: calc(100vw - 24px) !important;
    gap: 6px !important;
  }

  #inicio-screen .home-header-controls {
    gap: 5px;
  }

  html body #inicio-screen .home-header-controls .audio-toggle-btn {
    width: 38px;
    max-width: 38px;
    height: 38px;
    min-height: 38px;
    font-size: 18px !important;
  }

  html body #inicio-screen .home-header-controls #lang-selector {
    gap: 4px !important;
  }

  html body #inicio-screen .home-header-controls #lang-selector .lang-btn {
    min-width: 38px !important;
    padding-inline: 6px !important;
  }
}

/* EOF LIST SPACING FIX: retos-list is a normal compact vertical list. */
html body #retos-screen #retos-list {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-content: stretch !important;
  gap: 12px !important;
  row-gap: 12px !important;
  min-height: unset !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html body #retos-screen #retos-list > li,
html body #retos-screen #retos-list > .reto-list-item {
  flex: 0 0 auto !important;
  margin: 0 !important;
  height: auto !important;
  min-height: unset !important;
}

/* EOF list spacing fix: no distributed vertical gaps between challenges. */
html body #retos-screen #retos-list {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-content: stretch !important;
  gap: 12px !important;
  row-gap: 12px !important;
  min-height: unset !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html body #retos-screen #retos-list > li,
html body #retos-screen #retos-list > .reto-list-item {
  flex: 0 0 auto !important;
  margin: 0 !important;
  height: auto !important;
  min-height: unset !important;
}

/* EOF OVERRIDE: Mis retos compact list, exact requested structure. */
html body #retos-screen .reto-list-item,
html body #retos-screen .reto-list-item.reto-list-item-pendientes {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  gap: 8px 12px !important;
  align-items: center !important;
  align-content: center !important;
  height: auto !important;
  min-height: unset !important;
  max-height: 130px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

html body #retos-screen .reto-list-avatar {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 44px !important;
  height: 44px !important;
  align-self: start !important;
  justify-self: center !important;
  margin: 0 !important;
}

html body #retos-screen .reto-list-info {
  grid-column: 2 / 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body #retos-screen .reto-list-codigo {
  font-size: 18px !important;
  line-height: 1.1 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #retos-screen .reto-list-meta,
html body #retos-screen .reto-list-status {
  margin-top: 3px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #retos-screen .reto-list-side {
  grid-column: 3 / 4 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  text-align: right !important;
  white-space: nowrap !important;
  display: block !important;
  min-width: max-content !important;
  margin: 0 !important;
}

html body #retos-screen .reto-list-time {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html body #retos-screen .reto-list-score {
  display: block !important;
  margin-top: 5px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body #retos-screen .reto-list-actions {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  align-self: start !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

html body #retos-screen .reto-list-btn {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  position: static !important;
}

@media (max-width: 420px) {
  html body #retos-screen .reto-list-item,
  html body #retos-screen .reto-list-item.reto-list-item-pendientes {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 7px 9px !important;
    padding: 12px !important;
    max-height: 130px !important;
  }

  html body #retos-screen .reto-list-avatar {
    width: 38px !important;
    height: 38px !important;
  }

  html body #retos-screen .reto-list-codigo {
    font-size: 16px !important;
  }

  html body #retos-screen .reto-list-meta,
  html body #retos-screen .reto-list-status {
    font-size: 11px !important;
  }

  html body #retos-screen .reto-list-time {
    font-size: 10px !important;
  }
}

/* ABSOLUTE FINAL: compact pending challenge list, exact requested grid. */
html body #retos-screen .reto-list-item,
html body #retos-screen .reto-list-item.reto-list-item-pendientes {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  gap: 8px 12px !important;
  align-items: center !important;
  align-content: center !important;
  height: auto !important;
  min-height: unset !important;
  max-height: 130px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

html body #retos-screen .reto-list-avatar {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  width: 44px !important;
  height: 44px !important;
  align-self: start !important;
  justify-self: center !important;
  margin: 0 !important;
}

html body #retos-screen .reto-list-info {
  grid-column: 2 / 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body #retos-screen .reto-list-codigo {
  font-size: 18px !important;
  line-height: 1.1 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #retos-screen .reto-list-meta {
  margin-top: 3px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #retos-screen .reto-list-status {
  margin-top: 3px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #retos-screen .reto-list-side {
  grid-column: 3 / 4 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  text-align: right !important;
  white-space: nowrap !important;
  display: block !important;
  min-width: max-content !important;
  margin: 0 !important;
}

html body #retos-screen .reto-list-time {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html body #retos-screen .reto-list-score {
  display: block !important;
  margin-top: 5px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body #retos-screen .reto-list-actions {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  align-self: start !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

html body #retos-screen .reto-list-btn {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  position: static !important;
}

@media (max-width: 420px) {
  html body #retos-screen .reto-list-item,
  html body #retos-screen .reto-list-item.reto-list-item-pendientes {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    gap: 7px 9px !important;
    padding: 12px !important;
    max-height: 130px !important;
  }

  html body #retos-screen .reto-list-avatar {
    width: 38px !important;
    height: 38px !important;
  }

  html body #retos-screen .reto-list-codigo {
    font-size: 16px !important;
  }

  html body #retos-screen .reto-list-meta,
  html body #retos-screen .reto-list-status {
    font-size: 11px !important;
  }

  html body #retos-screen .reto-list-time {
    font-size: 10px !important;
  }
}

@media (max-width: 380px) {
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn {
    min-height: 54px !important;
    padding-left: 66px !important;
    padding-right: 34px !important;
    font-size: 14px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn::before,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario::before,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn::before,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn::before,
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn::before {
    left: 12px !important;
    width: 40px !important;
    height: 40px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario {
    padding-right: 70px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario::after {
    right: 10px !important;
    padding: 4px 6px !important;
    font-size: 8px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta {
    min-height: 56px !important;
    padding-left: 66px !important;
    padding-right: 34px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta::before {
    left: 12px !important;
    width: 40px !important;
    height: 40px !important;
  }
}
/* Camino Arlequinado */
#camino-progress-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(5, 8, 14, 0.74);
  backdrop-filter: blur(12px);
}

.camino-progress-panel {
  position: relative;
  width: min(440px, 100%);
  max-height: min(720px, calc(100vh - 28px));
  overflow: auto;
  border-radius: 18px;
  padding: 24px;
  color: #f8fbff;
  background:
    linear-gradient(135deg, rgba(27, 42, 68, 0.96), rgba(12, 19, 31, 0.98)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 16px, rgba(47,111,199,0.12) 16px 32px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

.camino-close-btn {
  position: absolute;
  display: none !important;
  top: 12px;
  right: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: #163b5d;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.camino-close-btn:hover {
  background: #0f2e4b;
}

.camino-progress-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #0b1422;
  background: #f7d66b;
  font-size: 12px;
  font-weight: 900;
}

.camino-progress-panel h2 {
  margin: 14px 0 8px;
  font-size: clamp(26px, 6vw, 38px);
  line-height: 0.98;
  letter-spacing: 0;
}

.camino-progress-count {
  margin-bottom: 12px;
  color: rgba(248, 251, 255, 0.82);
  font-weight: 700;
}

.camino-progress-bar {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.camino-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f7d66b, #37a7ff, #ffffff);
}

.camino-medal {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  margin: 18px 0 14px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.camino-medal-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(247, 214, 107, 0.18);
  font-size: 28px;
}

.camino-medal small,
.camino-helps h3 {
  display: block;
  margin: 0 0 4px;
  color: rgba(248, 251, 255, 0.7);
  font-size: 13px;
  font-weight: 800;
}

.camino-medal strong {
  display: block;
  font-size: 20px;
  line-height: 1.1;
}

.camino-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.camino-mini-stats span,
.camino-helps div {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.09);
  font-weight: 800;
}

.camino-helps {
  margin-top: 8px;
}

.camino-helps div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.camino-next {
  margin: 14px 0 0;
  padding: 11px 12px;
  border-radius: 10px;
  color: #102033;
  background: #f7d66b;
  font-weight: 900;
  text-align: center;
}

.camino-progress-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
}

.camino-progress-actions button {
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  font-weight: 950;
  cursor: pointer;
}

#camino-start-btn {
  color: #091422;
  background: #ffffff;
}

/* Clear selected state for challenge mode choices. */
.reto-mode-option {
  position: relative !important;
  padding-right: 42px !important;
  border: 1px solid rgba(102, 170, 225, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(4, 25, 49, 0.72), rgba(0, 10, 26, 0.82)) !important;
  color: rgba(218, 234, 248, 0.76) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  opacity: 0.74;
}

.reto-mode-option:not(.is-active):not(.active):not([aria-pressed="true"]) .reto-mode-option-title,
.reto-mode-option:not(.is-active):not(.active):not([aria-pressed="true"]) .reto-mode-option-meta {
  opacity: 0.72;
}

.reto-mode-option.is-active,
.reto-mode-option.active,
.reto-mode-option[aria-pressed="true"] {
  border: 2px solid #4cc3ff !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(76, 195, 255, 0.34), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(5, 68, 130, 0.98), rgba(0, 28, 70, 0.98)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 14px 30px rgba(0, 0, 0, 0.34),
    0 0 0 3px rgba(76, 195, 255, 0.16),
    0 0 28px rgba(76, 195, 255, 0.44) !important;
  opacity: 1;
  transform: translateY(-1px);
}

.reto-mode-option.is-active::after,
.reto-mode-option.active::after,
.reto-mode-option[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: #075fa8;
  font-size: 15px;
  font-weight: 1000;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.42);
}

.reto-mode-option-selected {
  display: none;
  margin-top: 4px;
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  font-weight: 1000;
  text-transform: uppercase;
}

.reto-mode-option.is-active .reto-mode-option-selected,
.reto-mode-option.active .reto-mode-option-selected,
.reto-mode-option[aria-pressed="true"] .reto-mode-option-selected {
  display: inline-flex;
}

@media (max-width: 420px) {
  .reto-mode-option {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 46px !important;
  }
}

#camino-start-btn:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

#camino-back-btn {
  display: block !important;
  width: 100%;
  color: #f8fbff;
  background: #163b5d;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

#camino-back-btn:hover {
  background: #0f2e4b;
}

.camino-new-question {
  background: rgba(247, 214, 107, 0.2) !important;
  color: #fff7d4 !important;
}

@media (max-width: 520px) {
  .camino-progress-panel {
    padding: 20px;
    border-radius: 14px;
  }

  .camino-mini-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px), (max-height: 740px) {
  #camino-progress-screen {
    align-items: flex-start;
    padding: max(8px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .camino-progress-panel {
    width: min(100%, 340px);
    max-height: none;
    padding: 14px 14px 12px;
    border-radius: 12px;
    overflow: visible;
  }

  .camino-progress-kicker {
    min-height: 20px;
    padding-inline: 8px;
    font-size: 10px;
  }

  .camino-progress-panel h2 {
    margin: 8px 0 6px;
    font-size: clamp(25px, 9vw, 32px);
    line-height: 1;
  }

  .camino-progress-count {
    margin-bottom: 9px;
    font-size: 15px;
  }

  .camino-progress-bar {
    height: 10px;
  }

  .camino-medal {
    grid-template-columns: 44px 1fr;
    gap: 10px;
    margin: 12px 0 10px;
    padding: 10px;
  }

  .camino-medal-icon {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }

  .camino-medal small,
  .camino-helps h3 {
    font-size: 12px;
  }

  .camino-medal strong {
    font-size: 18px;
  }

  .camino-mini-stats {
    gap: 8px;
    margin-bottom: 10px;
  }

  .camino-mini-stats span,
  .camino-helps div {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 15px;
  }

  .camino-progress-actions {
    gap: 8px;
    margin-top: 12px;
  }

  .camino-progress-actions button {
    min-height: 44px;
    border-radius: 9px;
    font-size: 14px;
  }
}

/* Broadcast motion cascade lock: keep the UX layer above older gameplay fixes. */
html body.gameplay-active::before,
body:has(#quiz-screen:not(.hidden))::before {
  animation: stadiumDrift 24s ease-in-out infinite alternate !important;
  will-change: transform, background-position !important;
}

html body.gameplay-active.question-is-entering::before {
  filter: blur(1.2px) saturate(1.3) contrast(1.08) brightness(1.24) !important;
}

html body.gameplay-active #game-panel.question-entering#game-panel {
  animation: gamePanelBroadcastIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

html body.gameplay-active #game-panel.question-entering #question-container,
html body.gameplay-active #game-panel.question-entering #answers-grid,
html body.gameplay-active #game-panel.question-entering #controls {
  animation: questionBroadcastIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

html body.gameplay-active .answer-btn.correct.answer-btn {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.75), transparent 44%),
    linear-gradient(180deg, #4cf08a, #0f8f44) !important;
  color: #052d16 !important;
  border-color: rgba(143, 255, 190, 0.98) !important;
  box-shadow:
    0 0 0 2px rgba(127, 255, 176, 0.34),
    0 0 26px rgba(51, 232, 123, 0.64),
    0 14px 26px rgba(0, 50, 20, 0.34) !important;
  animation: broadcastCorrect 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

html body.gameplay-active .answer-btn.wrong.answer-btn {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.62), transparent 42%),
    linear-gradient(180deg, #ff6f82, #b91f34) !important;
  color: #fff !important;
  border-color: rgba(255, 176, 188, 0.98) !important;
  box-shadow:
    0 0 0 2px rgba(255, 94, 117, 0.24),
    0 0 22px rgba(255, 74, 99, 0.54),
    0 14px 26px rgba(65, 0, 10, 0.32) !important;
  animation: broadcastWrong 360ms ease both !important;
}

html body.gameplay-active .answer-btn.answer-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.018) !important;
}

#explicacion-panel {
  animation: explanationBroadcastUp 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

@media (max-width: 620px) {
  html body.gameplay-active .audio-toggle-btn {
    top: auto !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
  }

  body:not(.gameplay-active) .audio-toggle-btn {
    top: calc(max(12px, env(safe-area-inset-top)) + 100px) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
  }
}

/* Premium transition and sponsor experience: EA FC inspired, mobile-first. */
html body.gameplay-active.question-is-entering::before {
  animation: stadiumQuestionSweep 1120ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
  filter: blur(1.8px) saturate(1.36) contrast(1.08) brightness(1.18) !important;
}

html body.gameplay-active.question-is-entering::after {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 0 18%, rgba(255, 255, 255, 0.18) 42%, rgba(255, 255, 255, 0) 66%),
    radial-gradient(circle at 50% 24%, rgba(128, 222, 255, 0.14), transparent 34%),
    radial-gradient(circle at 50% 66%, rgba(76, 190, 96, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(2, 13, 24, 0.02) 0%, rgba(3, 24, 36, 0) 44%, rgba(0, 6, 13, 0.1) 100%) !important;
  animation: questionLightSweep 1120ms ease both !important;
}

html body.gameplay-active #game-panel.question-entering#game-panel {
  animation: premiumQuestionPanelIn 980ms 140ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
}

html body.gameplay-active #game-panel.question-entering #question-container,
html body.gameplay-active #game-panel.question-entering #answers-grid,
html body.gameplay-active #game-panel.question-entering #controls {
  animation: premiumQuestionContentIn 900ms 220ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
}

.round-transition-overlay,
.ad-break-bumper {
  overflow: hidden !important;
  isolation: isolate !important;
}

.round-transition-overlay {
  background:
    radial-gradient(circle at 50% 38%, rgba(79, 190, 255, 0.22), transparent 31%),
    radial-gradient(circle at 78% 18%, rgba(240, 205, 108, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(0, 20, 48, 0.24), rgba(0, 6, 18, 0.5)),
    url("estadi.jpg") center 48% / cover no-repeat !important;
}

.round-transition-overlay::before,
.ad-break-bumper::before {
  background:
    linear-gradient(107deg, transparent 0 34%, rgba(255, 255, 255, 0.2) 43%, transparent 56%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 14px) !important;
  opacity: 0.72 !important;
  mix-blend-mode: screen;
}

.round-transition-overlay::after,
.ad-break-bumper::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 18%, rgba(154, 220, 255, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 70%, rgba(239, 203, 111, 0.14) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 78%, rgba(255, 255, 255, 0.12) 0 1px, transparent 2px);
  background-size: 180px 180px, 220px 220px, 260px 260px, 210px 210px;
  animation: premiumParticles 940ms ease-out both;
}

.round-transition-overlay.show {
  animation: premiumRoundOverlay 920ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
}

.round-transition-overlay.show::before {
  animation: premiumBroadcastSweep 860ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
}

.round-broadcast-card {
  width: min(82vw, 560px) !important;
  min-width: 0 !important;
  padding: clamp(20px, 5vw, 34px) clamp(22px, 7vw, 46px) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(183, 228, 255, 0.48) !important;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 32%, rgba(5, 31, 66, 0.72) 100%),
    radial-gradient(circle at 50% 0%, rgba(87, 202, 255, 0.28), transparent 50%),
    rgba(2, 19, 43, 0.68) !important;
  backdrop-filter: blur(18px) saturate(1.28) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(91, 193, 255, 0.18),
    0 30px 90px rgba(0, 8, 24, 0.52),
    0 0 42px rgba(55, 178, 255, 0.28) !important;
  animation: premiumRoundCard 820ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
}

.round-broadcast-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.round-broadcast-kicker {
  color: #f2d37a !important;
  letter-spacing: 0.18em !important;
  font-size: clamp(10px, 2vw, 12px) !important;
}

.round-broadcast-card strong {
  font-size: clamp(36px, 11vw, 76px) !important;
  color: #f8fbff;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.22),
    0 14px 38px rgba(0, 0, 0, 0.56),
    0 0 28px rgba(79, 190, 255, 0.38) !important;
  animation: premiumTitlePop 720ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
}

.round-broadcast-stats {
  display: inline-flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.round-broadcast-stats span {
  margin: 0 !important;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(154, 220, 255, 0.34);
  background: rgba(0, 31, 72, 0.5);
  color: #ffffff !important;
  font-size: clamp(11px, 2.5vw, 13px) !important;
  letter-spacing: 0.04em !important;
}

.ad-break-bumper {
  background:
    radial-gradient(circle at 50% 42%, rgba(67, 190, 255, 0.2), transparent 30%),
    radial-gradient(circle at 72% 26%, rgba(240, 205, 108, 0.15), transparent 26%),
    linear-gradient(180deg, rgba(0, 22, 54, 0.32), rgba(0, 7, 22, 0.58)),
    url("estadi.jpg") center 48% / cover no-repeat !important;
}

.ad-break-bumper.show {
  animation: premiumSponsorBumper 720ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
}

.ad-break-card {
  min-width: 0 !important;
  width: min(76vw, 430px) !important;
  padding: clamp(17px, 5vw, 26px) clamp(20px, 7vw, 38px) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(176, 224, 255, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(3, 22, 48, 0.66) !important;
  backdrop-filter: blur(18px) saturate(1.24) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 28px 72px rgba(0, 8, 24, 0.46),
    0 0 32px rgba(52, 178, 255, 0.22) !important;
  text-transform: none !important;
  animation: premiumSponsorCard 650ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
}

.ad-break-card span {
  color: #f2d37a !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
}

.ad-break-card strong {
  margin-top: 2px;
  font-size: clamp(24px, 7vw, 38px) !important;
  line-height: 1.02 !important;
  text-transform: none !important;
}

.ad-break-card small {
  display: block;
  margin-top: 10px;
  color: rgba(232, 245, 255, 0.74);
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 750;
}

#ad-screen-round {
  background:
    radial-gradient(circle at 50% 28%, rgba(88, 194, 255, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(0, 20, 48, 0.5), rgba(0, 6, 18, 0.74)),
    url("estadi.jpg") center 48% / cover no-repeat !important;
  gap: clamp(10px, 2.5vh, 16px) !important;
  padding: clamp(18px, 5vw, 34px) !important;
  backdrop-filter: blur(9px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.18) !important;
}

#ad-screen-round::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.12) 48%, transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(20, 118, 255, 0.22), transparent 44%);
  mix-blend-mode: screen;
}

#ad-title {
  position: relative;
  margin: 0 0 2px !important;
  height: auto;
  color: transparent !important;
  font-size: 0 !important;
}

#ad-title::before {
  content: "Patrocinado por";
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(242, 211, 122, 0.34);
  background: rgba(5, 26, 55, 0.48);
  color: #f2d37a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#ad-image {
  position: relative;
  width: min(88vw, 520px) !important;
  max-width: min(88vw, 520px) !important;
  max-height: min(48vh, 390px) !important;
  margin: 0 !important;
  padding: clamp(10px, 2.6vw, 16px);
  border-radius: 24px;
  border: 1px solid rgba(201, 232, 255, 0.36);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
    rgba(2, 18, 42, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 28px 80px rgba(0, 8, 24, 0.48),
    0 0 36px rgba(54, 177, 255, 0.2);
  backdrop-filter: blur(12px) saturate(1.18);
  -webkit-backdrop-filter: blur(12px) saturate(1.18);
  animation: premiumAdImageIn 420ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
}

#ad-text {
  position: relative;
  width: min(88vw, 500px);
  max-width: 500px !important;
  margin: 0 !important;
  padding: 12px 16px;
  border-radius: 18px;
  border: 1px solid rgba(154, 220, 255, 0.22);
  background: rgba(2, 18, 42, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(244, 250, 255, 0.92);
  animation: premiumAdMetaIn 460ms 70ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
}

#ad-text .round-title {
  margin-bottom: 6px;
  color: #ffffff;
  font-size: clamp(17px, 4.6vw, 25px);
  font-weight: 950;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
}

#ad-text .round-stats,
#ad-text .ad-stats {
  color: rgba(226, 243, 255, 0.76);
  font-size: clamp(12px, 3vw, 14px);
  font-weight: 800;
}

#ad-text .round-next,
#ad-text .ad-reward {
  display: inline-flex;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(242, 211, 122, 0.14);
  color: #f5d77f;
  border: 1px solid rgba(242, 211, 122, 0.26);
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 900;
}

#close-ad {
  position: relative;
  min-width: min(72vw, 260px);
  min-height: 48px;
  margin-top: 2px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(170, 224, 255, 0.44) !important;
  background:
    linear-gradient(180deg, rgba(49, 174, 255, 0.94), rgba(0, 93, 190, 0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 16px 36px rgba(0, 54, 130, 0.38),
    0 0 20px rgba(72, 190, 255, 0.22) !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

#close-ad:disabled {
  opacity: 0.72;
  filter: saturate(0.86);
}

@keyframes stadiumQuestionSweep {
  0% {
    transform: scale(1.055) translateX(-14px);
    background-position: 46% 48%;
  }
  42% {
    transform: scale(1.032) translateX(-5px);
    background-position: 49% 48%;
  }
  100% {
    transform: scale(1.012) translateX(0);
    background-position: 50% 48%;
  }
}

@keyframes questionLightSweep {
  from { opacity: 0; background-position: -80vw 0, center, center, center; }
  24%, 58% { opacity: 1; }
  to { opacity: 0; background-position: 80vw 0, center, center, center; }
}

@keyframes premiumQuestionPanelIn {
  0% {
    opacity: 0;
    transform: translateX(24px) scale(0.985);
    filter: blur(5px) saturate(1.1);
  }
  28% {
    opacity: 0.5;
    transform: translateX(14px) scale(0.99);
    filter: blur(3px) saturate(1.08);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0) saturate(1);
  }
}

@keyframes premiumQuestionContentIn {
  0% {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(4px);
  }
  30% {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes premiumRoundOverlay {
  0% {
    opacity: 0;
    background-position: center 48%;
    filter: saturate(1.08);
  }
  16%, 78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: center 46%;
    filter: saturate(1.16);
  }
}

@keyframes premiumBroadcastSweep {
  from { transform: translateX(-48%) skewX(-10deg); }
  to { transform: translateX(48%) skewX(-10deg); }
}

@keyframes premiumRoundCard {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
    filter: blur(3px);
  }
  28%, 76% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(1.02);
    filter: blur(1px);
  }
}

@keyframes premiumTitlePop {
  0% { opacity: 0; transform: scale(0.88); }
  32%, 78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.035); }
}

@keyframes premiumParticles {
  from { opacity: 0; transform: translate3d(-10px, 10px, 0); }
  35%, 75% { opacity: 1; }
  to { opacity: 0; transform: translate3d(12px, -12px, 0); }
}

@keyframes premiumSponsorBumper {
  0% { opacity: 0; background-position: center 49%; }
  18%, 74% { opacity: 1; }
  100% { opacity: 0; background-position: center 47%; }
}

@keyframes premiumSponsorCard {
  0% { opacity: 0; transform: translateY(14px) scale(0.96); filter: blur(3px); }
  28%, 76% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-8px) scale(1.01); filter: blur(1px); }
}

@keyframes premiumAdImageIn {
  from { opacity: 0; transform: translateY(18px) scale(0.975); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes premiumAdMetaIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 620px) {
  #ad-screen-round {
    justify-content: center !important;
    gap: 9px !important;
    padding: 16px 12px !important;
  }

  #ad-image {
    width: min(92vw, 390px) !important;
    max-width: min(92vw, 390px) !important;
    max-height: 43vh !important;
    border-radius: 20px;
  }

  #ad-text {
    width: min(92vw, 390px);
    padding: 10px 12px;
    border-radius: 16px;
  }

  #close-ad {
    min-height: 44px;
  }
}

@media (max-width: 390px), (max-height: 740px) {
  #ad-screen-round {
    height: 100dvh !important;
    min-height: 100dvh !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #ad-title::before {
    padding: 4px 10px;
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  #ad-image {
    width: min(92vw, 350px) !important;
    max-width: min(92vw, 350px) !important;
    max-height: 38dvh !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }

  #ad-text {
    width: min(92vw, 350px) !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
  }

  #ad-text .round-title {
    margin-bottom: 4px !important;
    font-size: clamp(16px, 5vw, 20px) !important;
    line-height: 1.05 !important;
  }

  #ad-text .round-stats,
  #ad-text .ad-stats {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  #ad-text .round-next,
  #ad-text .ad-reward {
    margin-top: 6px !important;
    padding: 4px 9px !important;
    font-size: 11px !important;
  }

  #close-ad {
    min-width: min(76vw, 230px) !important;
    min-height: 42px !important;
    margin-top: 0 !important;
    font-size: 14px !important;
  }
}

@media (max-height: 650px) {
  #ad-screen-round {
    gap: 6px !important;
    padding-top: max(8px, env(safe-area-inset-top)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  #ad-image {
    max-height: 34dvh !important;
  }

  #ad-text {
    padding-block: 8px !important;
  }

  #close-ad {
    min-height: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.gameplay-active.question-is-entering::before,
  html body.gameplay-active.question-is-entering::after,
  html body.gameplay-active #game-panel.question-entering#game-panel,
  html body.gameplay-active #game-panel.question-entering #question-container,
  html body.gameplay-active #game-panel.question-entering #answers-grid,
  html body.gameplay-active #game-panel.question-entering #controls,
  .round-transition-overlay.show,
  .round-transition-overlay.show::before,
  .round-transition-overlay::after,
  .round-broadcast-card,
  .round-broadcast-card strong,
  .ad-break-bumper.show,
  .ad-break-card,
  #ad-image,
  #ad-text {
    animation: none !important;
  }
}

/* Modern help modal: premium onboarding without leaving the main menu. */
body.modal-open {
  overflow: hidden;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #how-to-play-btn {
  order: 55 !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #how-to-play-btn.btn-principal {
  position: relative !important;
  width: min(100%, 390px) !important;
  max-width: calc(100vw - 32px) !important;
  min-height: 62px !important;
  margin: 5px auto !important;
  padding: 0 42px 0 78px !important;
  border-radius: 13px !important;
  border: 2px solid rgba(0, 128, 229, 0.78) !important;
  overflow: hidden !important;
  justify-content: flex-start !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 12% 45%, rgba(255, 255, 255, 0.18), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(242, 211, 122, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(2, 33, 72, 0.96), rgba(0, 12, 31, 0.98)) !important;
  color: #fff !important;
  font-size: clamp(15px, 4.4vw, 19px) !important;
  font-weight: 1000 !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.48),
    0 0 14px rgba(255, 255, 255, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(123, 205, 255, 0.16),
    inset 0 -16px 34px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(0, 96, 188, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(0, 125, 255, 0.18) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #how-to-play-btn::before {
  content: "?" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 2px solid rgba(217, 241, 255, 0.9) !important;
  background:
    radial-gradient(circle at 35% 25%, #ffffff 0 12%, #8adeff 34%, #168fff 68%, #004aa5 100%) !important;
  color: #00183a !important;
  font-size: 30px !important;
  font-weight: 1000 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  transform: translateY(-50%) !important;
  box-shadow:
    0 8px 15px rgba(0, 0, 0, 0.34),
    0 0 16px rgba(49, 178, 255, 0.32) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #how-to-play-btn::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 3px solid #40a8ff !important;
  border-right: 3px solid #40a8ff !important;
  transform: translateY(-50%) rotate(45deg) !important;
  box-shadow: 0 0 12px rgba(64, 168, 255, 0.42) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #how-to-play-btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(42, 166, 255, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(153, 217, 255, 0.2),
    inset 0 -16px 34px rgba(0, 0, 0, 0.3),
    0 14px 30px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(0, 136, 255, 0.28) !important;
}

#how-to-play-modal {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 28px);
  background:
    radial-gradient(circle at 50% 30%, rgba(75, 190, 255, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(0, 18, 42, 0.52), rgba(0, 5, 16, 0.82)),
    rgba(0, 5, 14, 0.64);
  backdrop-filter: blur(10px) saturate(1.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.18);
  animation: howToPlayFade 180ms ease both;
}

#how-to-play-card {
  position: relative;
  width: min(940px, 100%);
  max-height: min(86svh, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(170, 224, 255, 0.38);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
    radial-gradient(circle at 50% 0%, rgba(68, 183, 255, 0.2), transparent 42%),
    rgba(2, 18, 42, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 34px 90px rgba(0, 5, 20, 0.56),
    0 0 42px rgba(52, 178, 255, 0.18);
  color: #f8fbff;
  animation: howToPlayCardIn 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#how-to-play-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 36%, rgba(255, 255, 255, 0.1) 45%, transparent 58%),
    radial-gradient(circle at 88% 10%, rgba(242, 211, 122, 0.16), transparent 28%);
  mix-blend-mode: screen;
}

#how-to-play-close {
  position: relative;
  z-index: 1;
  width: min(280px, calc(100% - 40px));
  min-height: 46px;
  margin: 0 auto clamp(22px, 4vw, 32px);
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(202, 234, 255, 0.34);
  background: rgba(5, 24, 52, 0.72);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26);
}

#how-to-play-close:hover {
  transform: translateY(-1px) !important;
  background: rgba(22, 89, 150, 0.82);
}

.how-to-play-header {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 5vw, 34px) clamp(20px, 5vw, 38px) 16px;
  text-align: center;
}

.how-to-play-kicker {
  display: none;
}

.how-to-play-title-icon {
  display: none;
}

#how-to-play-title {
  margin: 8px auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: clamp(27px, 7vw, 46px);
  font-weight: 1000;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.44);
}

#how-to-play-title::before {
  content: "?";
  flex: 0 0 auto;
  width: clamp(42px, 11vw, 52px);
  height: clamp(42px, 11vw, 52px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(217, 241, 255, 0.9);
  background:
    radial-gradient(circle at 35% 25%, #ffffff 0 12%, #8adeff 34%, #168fff 68%, #004aa5 100%);
  color: #00183a;
  font-size: clamp(27px, 7vw, 32px);
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
  box-shadow:
    0 8px 15px rgba(0, 0, 0, 0.34),
    0 0 16px rgba(49, 178, 255, 0.32);
}

.how-to-play-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 8px clamp(16px, 4vw, 30px) clamp(18px, 4vw, 30px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.how-to-play-item,
.how-to-play-footer {
  border-radius: 18px;
  border: 1px solid rgba(157, 220, 255, 0.24);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(1, 18, 42, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 16px 34px rgba(0, 4, 16, 0.22);
}

.how-to-play-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 13px;
  padding: 15px;
}

.how-to-play-menu-visual {
  border: 2px solid rgba(0, 128, 229, 0.78);
  background:
    radial-gradient(circle at 12% 45%, rgba(15, 134, 255, 0.28), transparent 30%),
    linear-gradient(180deg, rgba(2, 33, 72, 0.96), rgba(0, 12, 31, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(123, 205, 255, 0.16),
    inset 0 -16px 34px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(0, 96, 188, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(0, 125, 255, 0.18);
}

.how-to-play-menu-challenge {
  border-color: rgba(0, 128, 229, 0.78);
  background:
    radial-gradient(circle at 12% 45%, rgba(255, 255, 255, 0.18), transparent 30%),
    radial-gradient(circle at 86% 20%, rgba(46, 168, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(2, 33, 72, 0.96), rgba(0, 12, 31, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(123, 205, 255, 0.16),
    inset 0 -18px 36px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(0, 96, 188, 0.28),
    0 12px 28px rgba(0, 0, 0, 0.3),
    0 0 28px rgba(0, 125, 255, 0.22);
}

.how-to-play-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.72), transparent 22%),
    linear-gradient(180deg, rgba(35, 166, 255, 0.95), rgba(0, 78, 168, 0.94));
  box-shadow: 0 0 22px rgba(48, 177, 255, 0.28);
  font-size: 26px;
}

.how-to-play-menu-visual .how-to-play-icon {
  width: 48px;
  height: 48px;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 12px rgba(49, 178, 255, 0.34));
}

.how-to-play-menu-challenge .how-to-play-icon {
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 12px rgba(49, 178, 255, 0.34));
}

.how-to-play-menu-start .how-to-play-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3CradialGradient id='b' cx='35%25' cy='25%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.23' stop-color='%239de8ff'/%3E%3Cstop offset='.54' stop-color='%231a9fff'/%3E%3Cstop offset='1' stop-color='%230047a5'/%3E%3C/radialGradient%3E%3ClinearGradient id='s' x1='0' x2='1'%3E%3Cstop stop-color='%2305c8ff'/%3E%3Cstop offset='1' stop-color='%230044b8' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 71 34 49M11 55l27-15M18 78l28-20' stroke='url(%23s)' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='55' cy='45' r='27' fill='url(%23b)' stroke='%23dff8ff' stroke-width='2.2'/%3E%3Cpath d='m55 22 10 7-4 12H49l-4-12zM34 44l11-8 8 9-6 10H35zM76 44l-11-8-8 9 6 10h12zM45 65l5-11h11l5 11-10 6z' fill='%23001542' opacity='.9'/%3E%3Cpath d='M31 35c6-14 25-24 41-11' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E");
}

.how-to-play-menu-camino .how-to-play-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='c' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%23ffffff'/%3E%3Cstop offset='.35' stop-color='%23bfeeff'/%3E%3Cstop offset='1' stop-color='%232b9bff'/%3E%3C/linearGradient%3E%3CradialGradient id='b' cx='34%25' cy='24%25' r='68%25'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='.35' stop-color='%23f8fdff'/%3E%3Cstop offset='1' stop-color='%231f91df'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='11' y='16' width='58' height='58' rx='8' fill='url(%23c)' stroke='%230068c9' stroke-width='3'/%3E%3Cpath d='M11 30h58' stroke='%230074d9' stroke-width='8'/%3E%3Crect x='20' y='43' width='10' height='10' rx='1.5' fill='%230072d8'/%3E%3Crect x='38' y='43' width='10' height='10' rx='1.5' fill='%230072d8'/%3E%3Crect x='20' y='59' width='10' height='10' rx='1.5' fill='%230072d8'/%3E%3Crect x='38' y='59' width='10' height='10' rx='1.5' fill='%230072d8'/%3E%3Crect x='20' y='7' width='8' height='22' rx='4' fill='%23fff' stroke='%23002b55' stroke-width='2'/%3E%3Crect x='51' y='7' width='8' height='22' rx='4' fill='%23fff' stroke='%23002b55' stroke-width='2'/%3E%3Ccircle cx='67' cy='63' r='21' fill='url(%23b)' stroke='%23e9fbff' stroke-width='2'/%3E%3Cpath d='m67 45 8 6-3 9h-10l-3-9zM50 64l9-6 6 7-4 8H51zM84 64l-9-6-6 7 4 8h10zM61 80l4-8h8l4 8-8 5z' fill='%2300123a' opacity='.88'/%3E%3C/svg%3E");
}

.how-to-play-menu-ranking .how-to-play-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%2398e4ff'/%3E%3Cstop offset='.5' stop-color='%231d93ff'/%3E%3Cstop offset='1' stop-color='%230047a5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='m48 7 5 11 12 1-9 8 3 12-11-6-11 6 3-12-9-8 12-1z' fill='%23eaf8ff' stroke='%2391dcff' stroke-width='2'/%3E%3Crect x='36' y='38' width='24' height='39' rx='3' fill='url(%23p)' stroke='%23bdefff' stroke-width='2'/%3E%3Crect x='13' y='54' width='23' height='23' rx='3' fill='url(%23p)' stroke='%238bdcff' stroke-width='2'/%3E%3Crect x='60' y='60' width='23' height='17' rx='3' fill='url(%23p)' stroke='%238bdcff' stroke-width='2'/%3E%3Ctext x='48' y='62' text-anchor='middle' font-family='Arial Black,Arial' font-size='24' fill='%23fff'%3E1%3C/text%3E%3Ctext x='24.5' y='71' text-anchor='middle' font-family='Arial Black,Arial' font-size='18' fill='%23fff'%3E2%3C/text%3E%3Ctext x='71.5' y='73' text-anchor='middle' font-family='Arial Black,Arial' font-size='15' fill='%23fff'%3E3%3C/text%3E%3Cpath d='M10 80h76' stroke='%23004191' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.how-to-play-menu-challenge .how-to-play-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23d9d9d9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='30' cy='28' r='14' fill='url(%23w)'/%3E%3Cpath d='M9 74c2-18 10-28 21-28s19 10 21 28z' fill='url(%23w)' stroke='%23bfbfbf' stroke-width='2'/%3E%3Ccircle cx='66' cy='28' r='14' fill='url(%23w)'/%3E%3Cpath d='M45 74c2-18 10-28 21-28s19 10 21 28z' fill='url(%23w)' stroke='%23bfbfbf' stroke-width='2'/%3E%3Ctext x='48' y='67' text-anchor='middle' font-family='Arial Black,Arial' font-size='28' fill='%232db8ff' stroke='%23081422' stroke-width='3' paint-order='stroke'%3EVS%3C/text%3E%3C/svg%3E");
}

.how-to-play-menu-my-challenges .how-to-play-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%23eaf8ff'/%3E%3Cstop offset='.28' stop-color='%236cc9ff'/%3E%3Cstop offset='1' stop-color='%23003488'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M48 8 79 20v22c0 21-13 35-31 45C30 77 17 63 17 42V20z' fill='%2308162d' stroke='%23d8f5ff' stroke-width='3'/%3E%3Cpath d='M48 17 70 26v17c0 15-9 25-22 33-13-8-22-18-22-33V26z' fill='url(%23s)' stroke='%23007be8' stroke-width='3'/%3E%3Cpath d='m48 30 6 12 13 2-10 9 3 13-12-7-12 7 3-13-10-9 13-2z' fill='%23f1fbff' stroke='%23b9ecff' stroke-width='2'/%3E%3C/svg%3E");
}

.how-to-play-copy h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: clamp(15px, 3.4vw, 18px);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.how-to-play-copy p,
.how-to-play-mini-row {
  margin: 0;
  color: rgba(232, 245, 255, 0.82);
  font-size: clamp(13px, 3vw, 15px);
  font-weight: 650;
  line-height: 1.45;
}

.how-to-play-copy p {
  text-align: left;
  text-align-last: auto;
  hyphens: none;
}

.how-to-play-mini-row span:not(.how-to-play-mini-icon) {
  text-align: left;
  text-align-last: auto;
}

.how-to-play-mini-list {
  display: grid;
  gap: 7px;
  margin-top: 6px;
}

.how-to-play-mini-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.how-to-play-mini-icon {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(242, 211, 122, 0.14);
  color: #f5d77f;
  border: 1px solid rgba(242, 211, 122, 0.24);
  font-size: 12px;
  font-weight: 1000;
  text-align: center;
}

.how-to-play-mini-row strong {
  color: #ffffff;
  font-weight: 950;
}

.how-to-play-footer {
  grid-column: 1 / -1;
  padding: 16px 18px;
  color: #f7fbff;
  font-size: clamp(16px, 4vw, 23px);
  font-weight: 1000;
  text-align: center;
  letter-spacing: 0;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.22),
    0 0 20px rgba(54, 178, 255, 0.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.14), transparent 42%),
    radial-gradient(circle at 35% 50%, rgba(46, 166, 255, 0.16), transparent 46%),
    linear-gradient(180deg, rgba(2, 33, 72, 0.82), rgba(0, 12, 31, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 22px rgba(45, 163, 255, 0.16);
}

@keyframes howToPlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes howToPlayCardIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 720px) {
  .how-to-play-grid {
    grid-template-columns: 1fr;
  }

  #how-to-play-card {
    max-height: 88svh;
    border-radius: 20px;
  }
}

@media (max-width: 560px) {
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #how-to-play-btn.btn-principal {
    min-height: 58px !important;
    margin: 5px auto !important;
    padding: 0 38px 0 72px !important;
    border-radius: 12px !important;
    font-size: clamp(14px, 4.7vw, 18px) !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #how-to-play-btn::before {
    left: 13px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 28px !important;
  }

  #how-to-play-modal {
    padding: 10px;
  }

  #how-to-play-close {
    width: calc(100% - 36px);
    min-height: 44px;
    margin-bottom: 18px;
  }

  .how-to-play-header {
    padding: 22px 18px 12px;
    text-align: center;
  }

  .how-to-play-grid {
    padding: 6px 10px 12px;
    gap: 9px;
  }

  .how-to-play-item {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 15px;
  }

  .how-to-play-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 23px;
  }
}

@media (max-width: 380px) {
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #how-to-play-btn.btn-principal {
    min-height: 54px !important;
    padding-left: 66px !important;
    padding-right: 34px !important;
    font-size: 14px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #how-to-play-btn::before {
    left: 12px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 25px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #how-to-play-modal,
  #how-to-play-card {
    animation: none !important;
  }
}

@media (max-width: 390px), (max-height: 700px) {
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) {
    padding-top: 4px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top {
    gap: 8px !important;
    padding: 4px 0 2px !important;
    margin-bottom: 0 !important;
    min-height: 32px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #game-logo {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
  }

  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .intro-title {
    max-width: 330px !important;
    margin-bottom: 4px !important;
    font-size: clamp(22px, 6.5vw, 26px) !important;
    line-height: 0.98 !important;
    text-wrap: balance !important;
  }

  body:not(.gameplay-active) .audio-toggle-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 17px !important;
  }
}

@media (max-width: 390px), (max-height: 700px) {
  body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top {
    padding-top: max(6px, env(safe-area-inset-top, 6px)) !important;
  }
}

/* Question sponsor banner */
.ad-banner-wrap {
  width: calc(100% - 32px);
  max-width: 420px;
  margin: 14px auto 0;
  border-radius: 16px;
  overflow: hidden;
  background: #061b33;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

.ad-banner-wrap a {
  display: block;
}

.ad-banner-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

#quiz-screen.hidden .ad-banner-wrap,
#quiz-screen[data-answered="true"] .ad-banner-wrap {
  display: none;
}

/* Standard Inicio button */
#how-to-play-close,
#modo-selector-cancelar-btn,
#reto-tipo-cancelar-btn,
#reto-created-home-btn,
#retos-back-btn,
#back-btn,
#camino-back-btn {
  width: 100% !important;
  max-width: none !important;
  min-height: 52px !important;
  margin: 12px 0 0 !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  border: 1px solid rgba(32, 116, 225, 0.75) !important;
  background:
    linear-gradient(180deg, rgba(27, 116, 238, 0.98), rgba(4, 62, 158, 0.98)) !important;
  color: rgba(248, 252, 255, 0.98) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 22px rgba(0, 60, 150, 0.28) !important;
}

#how-to-play-close:hover,
#modo-selector-cancelar-btn:hover,
#reto-tipo-cancelar-btn:hover,
#reto-created-home-btn:hover,
#retos-back-btn:hover,
#back-btn:hover,
#camino-back-btn:hover {
  border-color: rgba(96, 178, 255, 0.95) !important;
  background:
    linear-gradient(180deg, rgba(45, 137, 255, 0.98), rgba(5, 74, 182, 0.98)) !important;
  transform: translateY(-1px) !important;
}

/* Ranking and challenges home buttons */
#ranking-screen .ranking-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#ranking-screen .ranking-actions #back-btn {
  grid-column: 1 / -1 !important;
  width: min(100%, 360px) !important;
  justify-self: center !important;
}

#ranking-list li:only-child {
  grid-column: 1 / -1 !important;
  width: min(100%, 360px) !important;
  min-height: 58px !important;
  margin: 8px auto 0 !important;
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: rgba(235, 246, 255, 0.82) !important;
}

#ranking-list li.ranking-info-row {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  padding: 10px 14px !important;
  text-align: center !important;
  color: rgba(226, 244, 255, 0.82) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-style: dashed !important;
  background: rgba(5, 25, 45, 0.48) !important;
}

#ranking-list li.ranking-text-row {
  grid-column: 1 / -1 !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) minmax(72px, auto) 48px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  text-align: left !important;
}

#ranking-list li.ranking-text-row .ranking-text-pos {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: rgba(45, 154, 255, 0.2) !important;
  color: #eaf7ff !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

#ranking-list li.ranking-text-row .ranking-text-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #f7fbff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

#ranking-list li.ranking-text-row .ranking-text-points,
#ranking-list li.ranking-text-row .ranking-text-streak {
  color: rgba(232, 246, 255, 0.9) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

body:has(#retos-screen:not(.hidden)) {
  min-height: 100svh !important;
  background: #020914 !important;
}

body:has(#retos-screen:not(.hidden))::before {
  content: "" !important;
  position: fixed !important;
  inset: -18px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: url("estadi.jpg") center 52% / cover no-repeat !important;
  filter: blur(3px) saturate(0.78) contrast(0.92) brightness(0.5) !important;
  transform: scale(1.04) !important;
  opacity: 0.96 !important;
  animation: none !important;
}

body:has(#retos-screen:not(.hidden))::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(49, 160, 255, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(1, 12, 26, 0.56), rgba(0, 5, 13, 0.82)) !important;
}

#retos-screen {
  position: relative !important;
  z-index: 1 !important;
  width: min(calc(100% - 28px), 560px) !important;
  min-height: 0 !important;
  margin: clamp(58px, 12vh, 96px) auto 24px !important;
  padding: 28px 20px 20px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(103, 194, 255, 0.34) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(36, 147, 231, 0.16), transparent 40%),
    linear-gradient(180deg, rgba(5, 25, 45, 0.76), rgba(1, 8, 18, 0.84)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 26px 70px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(29, 155, 255, 0.1) !important;
  backdrop-filter: blur(16px) !important;
}

#retos-screen-title {
  margin: 0 0 18px !important;
  color: #f7fbff !important;
  font-size: clamp(24px, 6vw, 30px) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.58) !important;
}

#retos-screen-title::after {
  content: "" !important;
  display: block !important;
  width: 82px !important;
  height: 1px !important;
  margin: 15px auto 0 !important;
  background: linear-gradient(90deg, transparent, rgba(72, 188, 255, 0.9), transparent) !important;
  box-shadow: 0 0 14px rgba(42, 168, 255, 0.46) !important;
}

#retos-list {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#retos-list li:only-child {
  min-height: 86px !important;
  margin: 0 0 16px !important;
  padding: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(112, 198, 255, 0.26) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 42%),
    rgba(2, 14, 29, 0.62) !important;
  color: rgba(235, 246, 255, 0.78) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#retos-back-btn {
  width: 100% !important;
  max-width: none !important;
  margin-top: 4px !important;
}

#ranking-screen .ranking-actions #back-btn {
  min-height: 52px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(32, 116, 225, 0.75) !important;
  background:
    linear-gradient(180deg, rgba(27, 116, 238, 0.98), rgba(4, 62, 158, 0.98)) !important;
  color: rgba(248, 252, 255, 0.98) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 22px rgba(0, 60, 150, 0.28) !important;
}

#ranking-screen .ranking-actions #back-btn:hover {
  border-color: rgba(96, 178, 255, 0.95) !important;
  background:
    linear-gradient(180deg, rgba(45, 137, 255, 0.98), rgba(5, 74, 182, 0.98)) !important;
}

/* Ranking action layout: two balanced filters, full-width navigation. */
#ranking-screen .ranking-actions {
  width: min(100%, 540px) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch !important;
}

#ranking-screen .ranking-actions #show-top10,
#ranking-screen .ranking-actions #show-all {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  justify-self: stretch !important;
}

#ranking-screen .ranking-actions #show-history,
#ranking-screen .ranking-actions #back-btn {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

#ranking-screen .ranking-actions #show-history {
  min-height: 44px !important;
}

#ranking-screen .ranking-actions #back-btn {
  max-width: none !important;
}

#ranking-screen .ranking-actions #show-top10.is-active,
#ranking-screen .ranking-actions #show-all.is-active,
#ranking-screen .ranking-actions #show-top10[aria-pressed="true"],
#ranking-screen .ranking-actions #show-all[aria-pressed="true"] {
  border-color: rgba(126, 211, 255, 0.74) !important;
  background:
    linear-gradient(180deg, rgba(30, 139, 239, 0.98), rgba(8, 73, 156, 0.98)) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 22px rgba(0, 86, 205, 0.32) !important;
}

/* Temporarily hide weekly challenges without removing the feature. */
#weekly-challenges {
  display: none !important;
}

/* Challenge type selector: compact blue card matching the mobile reference. */
#reto-tipo-screen {
  min-height: 100dvh !important;
  padding: max(20px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom)) !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(36, 137, 255, 0.16), transparent 34%),
    rgba(0, 6, 16, 0.9) !important;
  backdrop-filter: blur(8px);
}

#reto-tipo-panel {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  max-height: calc(100dvh - max(40px, env(safe-area-inset-top)) - max(40px, env(safe-area-inset-bottom))) !important;
  padding: 34px 20px 24px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(72, 155, 239, 0.72) !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(25, 113, 255, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(2, 25, 50, 0.96), rgba(0, 9, 21, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 70px rgba(0, 0, 0, 0.48),
    0 0 34px rgba(25, 132, 255, 0.12) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#reto-tipo-panel .mode-select-hero-challenge {
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
  color: transparent;
  font-size: 0;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.38), transparent 18%),
    linear-gradient(180deg, #2da5ff, #034dc6);
  box-shadow:
    0 0 0 1px rgba(108, 176, 255, 0.38),
    0 0 36px rgba(14, 120, 255, 0.48);
}

#reto-tipo-panel .mode-select-hero-challenge::before {
  content: "";
  width: 42px;
  height: 34px;
  display: block;
  background:
    radial-gradient(circle at 36% 26%, #2cc2ff 0 8px, transparent 8.5px),
    radial-gradient(circle at 66% 26%, #12a7f4 0 8px, transparent 8.5px),
    radial-gradient(ellipse at 35% 82%, #0f8ff0 0 14px, transparent 14.5px),
    radial-gradient(ellipse at 68% 82%, #0876dc 0 14px, transparent 14.5px);
  filter: drop-shadow(0 2px 8px rgba(0, 53, 120, 0.36));
}

#reto-tipo-panel .mode-select-hero-challenge::after {
  inset: -22px;
  background:
    radial-gradient(circle at 12px 8px, rgba(45, 138, 255, 0.85) 0 2px, transparent 2.5px),
    radial-gradient(circle at 68px 4px, rgba(45, 138, 255, 0.7) 0 2px, transparent 2.5px),
    radial-gradient(circle at 82px 55px, rgba(45, 138, 255, 0.62) 0 2px, transparent 2.5px),
    radial-gradient(circle at 4px 62px, rgba(45, 138, 255, 0.56) 0 2px, transparent 2.5px);
}

#reto-tipo-panel .reto-dialog-titulo {
  margin: 0 0 10px !important;
  color: #ffffff !important;
  font-size: clamp(27px, 7vw, 39px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
}

#reto-tipo-panel .mode-select-subtitle {
  margin: 0 0 48px !important;
  color: rgba(226, 240, 255, 0.78);
  font-size: clamp(17px, 4.2vw, 22px);
  font-weight: 500;
}

#reto-tipo-panel .mode-select-subtitle::after {
  bottom: -28px;
  width: 128px;
}

#reto-tipo-botones {
  gap: 18px !important;
  margin: 0 0 32px !important;
}

#reto-tipo-botones .btn-tipo-reto {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) 28px !important;
  column-gap: 12px !important;
  align-items: center !important;
  min-height: 110px !important;
  padding: 20px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(65, 146, 230, 0.72) !important;
  background:
    radial-gradient(circle at 14% 50%, rgba(37, 148, 255, 0.3), transparent 20%),
    linear-gradient(180deg, rgba(6, 43, 78, 0.92), rgba(1, 20, 42, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

#reto-tipo-botones .btn-tipo-reto::after {
  content: "›";
  position: absolute;
  right: 24px;
  top: 50%;
  color: rgba(190, 226, 255, 0.82);
  font-size: 48px;
  line-height: 1;
  transform: translateY(-52%);
  background: none;
  box-shadow: none;
}

#reto-tipo-botones .btn-tipo-reto .btn-tipo-icono {
  position: static !important;
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: center;
  transform: none !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50%;
  display: grid !important;
  place-items: center;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.42), transparent 20%),
    linear-gradient(180deg, #2cb4ff, #0052c9) !important;
  color: transparent !important;
  font-size: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 24px rgba(21, 135, 255, 0.34);
}

#reto-tipo-1v1-btn .btn-tipo-icono::before,
#reto-tipo-grupo-btn .btn-tipo-icono::before {
  content: "";
  width: 31px;
  height: 25px;
  display: block;
  background:
    radial-gradient(circle at 34% 27%, #f4fbff 0 6px, transparent 6.5px),
    radial-gradient(circle at 66% 27%, #d6ecff 0 6px, transparent 6.5px),
    radial-gradient(ellipse at 34% 82%, #f0f8ff 0 10px, transparent 10.5px),
    radial-gradient(ellipse at 66% 82%, #d8eeff 0 10px, transparent 10.5px);
  filter: drop-shadow(0 2px 5px rgba(0, 30, 74, 0.32));
}

#reto-tipo-1v1-btn .btn-tipo-icono::before {
  transform: translateX(1px);
}

#reto-tipo-grupo-btn .btn-tipo-icono::before {
  width: 34px;
  height: 27px;
  background:
    radial-gradient(circle at 50% 20%, #f4fbff 0 5px, transparent 5.5px),
    radial-gradient(circle at 25% 35%, #d6ecff 0 5px, transparent 5.5px),
    radial-gradient(circle at 75% 35%, #d6ecff 0 5px, transparent 5.5px),
    radial-gradient(ellipse at 50% 82%, #f0f8ff 0 10px, transparent 10.5px),
    radial-gradient(ellipse at 25% 90%, #d8eeff 0 8px, transparent 8.5px),
    radial-gradient(ellipse at 75% 90%, #d8eeff 0 8px, transparent 8.5px);
}

#reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  color: #fff !important;
  font-size: clamp(23px, 5vw, 29px) !important;
  font-weight: 900 !important;
  line-height: 1.05;
}

#reto-tipo-botones .btn-tipo-reto small {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  color: rgba(225, 239, 255, 0.72) !important;
  font-size: clamp(15px, 3.6vw, 19px) !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

#reto-tipo-cancelar-btn {
  min-height: 76px !important;
  width: min(100%, 320px) !important;
  margin: 0 auto !important;
  border: 1px solid rgba(89, 173, 255, 0.38) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #1687ff, #064fca) !important;
  color: #fff !important;
  font-size: clamp(21px, 5vw, 27px) !important;
  font-weight: 900 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 14px 26px rgba(0, 72, 180, 0.35) !important;
}

#reto-tipo-cancelar-btn::before {
  content: "⌂";
  margin-right: 16px;
  font-size: 1.05em;
}

@media (max-width: 480px) {
  #reto-tipo-screen {
    align-items: flex-start !important;
    padding: max(16px, env(safe-area-inset-top)) 18px max(16px, env(safe-area-inset-bottom)) !important;
  }

  #reto-tipo-panel {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    max-height: calc(100dvh - max(32px, env(safe-area-inset-top)) - max(32px, env(safe-area-inset-bottom))) !important;
    min-height: auto;
    padding: 34px 18px 30px !important;
    border-radius: 14px !important;
  }

  #reto-tipo-panel .mode-select-hero-challenge {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    background:
      radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.5), transparent 18%),
      radial-gradient(circle at 50% 55%, rgba(29, 168, 255, 0.38), transparent 46%),
      linear-gradient(180deg, #35b6ff, #0557d4);
  }

  #reto-tipo-panel .mode-select-hero-challenge::before {
    width: 42px;
    height: 35px;
    background:
      radial-gradient(circle at 35% 24%, #68d8ff 0 8px, transparent 8.5px),
      radial-gradient(circle at 65% 24%, #24b4ff 0 8px, transparent 8.5px),
      radial-gradient(ellipse at 35% 82%, #2aa7f5 0 14px, transparent 14.5px),
      radial-gradient(ellipse at 65% 82%, #0d7ee7 0 14px, transparent 14.5px),
      linear-gradient(90deg, transparent 0 36%, rgba(255, 255, 255, 0.18) 36% 39%, transparent 39% 100%);
  }

  #reto-tipo-panel .mode-select-hero-challenge::after {
    inset: -18px;
    background:
      radial-gradient(circle at 12px 8px, rgba(45, 138, 255, 0.9) 0 2px, transparent 2.5px),
      radial-gradient(circle at 58px 3px, rgba(45, 138, 255, 0.78) 0 2px, transparent 2.5px),
      radial-gradient(circle at 74px 45px, rgba(45, 138, 255, 0.66) 0 2px, transparent 2.5px),
      radial-gradient(circle at 3px 50px, rgba(45, 138, 255, 0.62) 0 2px, transparent 2.5px);
  }

  #reto-tipo-panel .reto-dialog-titulo {
    font-size: 22px !important;
    font-weight: 950 !important;
    margin-bottom: 12px !important;
  }

  #reto-tipo-panel .mode-select-subtitle {
    margin-bottom: 40px !important;
    font-size: 14px;
    font-weight: 700;
  }

  #reto-tipo-panel .mode-select-subtitle::after {
    bottom: -22px;
    width: 78px;
  }

  #reto-tipo-botones {
    gap: 18px !important;
    margin-bottom: 34px !important;
  }

  #reto-tipo-botones .btn-tipo-reto {
    grid-template-columns: 56px minmax(0, 1fr) 22px !important;
    column-gap: 10px !important;
    min-height: 112px !important;
    padding: 18px 12px !important;
    border-radius: 10px !important;
  }

  #reto-tipo-botones .btn-tipo-reto .btn-tipo-icono {
    position: static !important;
    justify-self: center;
    width: 48px !important;
    height: 48px !important;
  }

  #reto-tipo-botones .btn-tipo-reto::after {
    right: 16px;
    font-size: 28px;
  }

  #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
    font-size: 22px !important;
    font-weight: 950 !important;
    text-align: center;
  }

  #reto-tipo-botones .btn-tipo-reto small {
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2;
    white-space: nowrap;
  }

  #reto-tipo-cancelar-btn {
    min-height: 50px !important;
    width: 128px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
  }

  #reto-tipo-cancelar-btn::before {
    margin-right: 8px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  #reto-tipo-panel {
    width: min(88vw, 430px) !important;
  }
}

@media (max-width: 360px) {
  #reto-tipo-screen {
    padding-inline: 10px !important;
  }

  #reto-tipo-panel {
    width: min(100%, 300px) !important;
    padding-inline: 12px !important;
  }

  #reto-tipo-botones .btn-tipo-reto {
    grid-template-columns: 48px minmax(0, 1fr) 18px !important;
    column-gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 8px !important;
  }

  #reto-tipo-botones .btn-tipo-reto .btn-tipo-icono {
    position: static !important;
    width: 44px !important;
    height: 44px !important;
  }

  #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
    font-size: 17px !important;
  }

  #reto-tipo-botones .btn-tipo-reto small {
    font-size: 11px !important;
  }
}

@media (max-width: 390px), (max-height: 740px) {
  #reto-tipo-screen {
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
  }

  #reto-tipo-panel {
    width: min(100%, 340px) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
    padding: 18px 12px 14px !important;
  }

  #reto-tipo-panel .mode-select-hero-challenge {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }

  #reto-tipo-panel .reto-dialog-titulo {
    margin-bottom: 6px !important;
    font-size: 22px !important;
  }

  #reto-tipo-panel .mode-select-subtitle {
    margin-bottom: 22px !important;
    font-size: 13px;
  }

  #reto-tipo-panel .mode-select-subtitle::after {
    bottom: -13px;
  }

  #reto-tipo-botones {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  #reto-tipo-botones .btn-tipo-reto {
    min-height: 82px !important;
    padding: 12px 10px !important;
  }

  #reto-tipo-botones .btn-tipo-reto .btn-tipo-icono {
    width: 42px !important;
    height: 42px !important;
  }

  #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
    font-size: 19px !important;
  }

  #reto-tipo-botones .btn-tipo-reto small {
    font-size: 12px !important;
  }

  #reto-tipo-cancelar-btn {
    min-height: 46px !important;
  }
}

/* Challenge completed screen. */
#reto-resultado-screen.challenge-final-screen {
  background:
    linear-gradient(180deg, rgba(0, 8, 18, 0.28), rgba(0, 4, 10, 0.58)),
    url("estadi.jpg") center / cover no-repeat !important;
  padding: 18px 14px !important;
  overflow-y: auto !important;
}

#reto-resultado-screen.challenge-final-screen #reto-resultado-panel {
  position: relative;
  width: min(100%, 720px) !important;
  max-width: 720px !important;
  max-height: none !important;
  margin: auto !important;
  padding: clamp(18px, 2.8vw, 30px) clamp(14px, 3vw, 30px) !important;
  border: 1px solid rgba(205, 220, 232, 0.34) !important;
  border-radius: 24px !important;
  color: #f7fbff !important;
  text-align: center !important;
  background:
    radial-gradient(circle at 50% 13%, rgba(255, 194, 54, 0.24), transparent 18%),
    linear-gradient(180deg, rgba(0, 26, 48, 0.84), rgba(0, 12, 25, 0.84)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 26px 70px rgba(0, 0, 0, 0.48) !important;
  overflow: hidden !important;
}

#reto-resultado-screen.challenge-final-screen #reto-resultado-panel::before {
  content: "";
  position: absolute;
  inset: 12px 30px auto;
  height: 116px;
  pointer-events: none;
  background:
    linear-gradient(45deg, #006ec8 0 100%) 2% 44% / 22px 22px no-repeat,
    linear-gradient(45deg, #b99117 0 100%) 8% 20% / 22px 22px no-repeat,
    linear-gradient(45deg, #006ec8 0 100%) 20% 14% / 17px 17px no-repeat,
    linear-gradient(45deg, #e7eef4 0 100%) 18% 60% / 24px 24px no-repeat,
    linear-gradient(45deg, #b99117 0 100%) 73% 17% / 18px 18px no-repeat,
    linear-gradient(45deg, #006ec8 0 100%) 82% 31% / 18px 18px no-repeat,
    linear-gradient(45deg, #e7eef4 0 100%) 95% 22% / 20px 20px no-repeat,
    linear-gradient(45deg, #006ec8 0 100%) 88% 58% / 18px 18px no-repeat;
  opacity: 0.86;
}

#reto-resultado-screen.challenge-final-screen #reto-resultado-icono {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(66px, 10vw, 96px);
  height: clamp(66px, 10vw, 96px);
  margin: 0 auto 6px !important;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 204, 76, 0.36), transparent 62%);
  color: transparent !important;
  font-size: 0 !important;
  filter: drop-shadow(0 0 32px rgba(255, 191, 55, 0.5));
}

#reto-resultado-screen.challenge-final-screen #reto-resultado-icono::after {
  content: "";
  width: 96%;
  height: 96%;
  background: url("logo.png") center / contain no-repeat;
}

#reto-resultado-screen.challenge-final-screen .reto-dialog-titulo {
  position: relative;
  z-index: 1;
  margin: 2px 0 4px !important;
  color: #f7fbff !important;
  font-size: clamp(28px, 5vw, 44px) !important;
  line-height: 0.98 !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.55),
    0 9px 20px rgba(0, 0, 0, 0.42);
}

#reto-resultado-screen.challenge-final-screen .reto-final-subtitle {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(17px, 2.6vw, 24px);
  font-weight: 900;
  line-height: 1.16;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.56);
}

#reto-resultado-screen.challenge-final-screen .reto-final-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 12px;
}

#reto-resultado-screen.challenge-final-screen .reto-final-stat {
  min-height: 104px;
  padding: 12px 8px 11px;
  border: 1px solid rgba(125, 176, 211, 0.32);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(4, 48, 78, 0.9), rgba(0, 25, 45, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 16px 34px rgba(0, 0, 0, 0.28);
}

#reto-resultado-screen.challenge-final-screen .reto-final-stat::before {
  display: block;
  margin-bottom: 6px;
  color: #1b9eff;
  font-size: 27px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(30, 158, 255, 0.5));
}

#reto-resultado-screen.challenge-final-screen .reto-final-points::before { content: "🏆"; }
#reto-resultado-screen.challenge-final-screen .reto-final-streak::before { content: "🔥"; filter: none; }
#reto-resultado-screen.challenge-final-screen .reto-final-time::before { content: "⏱"; color: #4bd47b; }

#reto-resultado-screen.challenge-final-screen .reto-final-stat span {
  display: block;
  color: rgba(245, 250, 255, 0.72);
  font-size: clamp(11px, 1.8vw, 15px);
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
}

#reto-resultado-screen.challenge-final-screen .reto-final-stat strong {
  display: block;
  margin-top: 7px;
  color: #f7fbff;
  font-size: clamp(25px, 4.4vw, 38px);
  font-weight: 1000;
  line-height: 0.96;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#reto-resultado-screen.challenge-final-screen .reto-final-points strong,
#reto-resultado-screen.challenge-final-screen .reto-final-time strong {
  color: #249dff;
}

#reto-resultado-screen.challenge-final-screen .reto-final-time strong {
  color: #55db7a;
}

#reto-resultado-screen.challenge-final-screen .reto-final-share-block {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 10px;
  padding: 11px 14px;
  border: 1px solid rgba(125, 176, 211, 0.32);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(2, 49, 76, 0.86), rgba(0, 25, 41, 0.88));
}

#reto-resultado-screen.challenge-final-screen .reto-final-share-block span {
  grid-column: 1 / -1;
  color: rgba(245, 250, 255, 0.68);
  font-size: clamp(11px, 1.8vw, 15px);
  font-weight: 1000;
  text-transform: uppercase;
}

#reto-resultado-screen.challenge-final-screen .reto-final-share-block strong {
  min-width: 0;
  color: #249dff;
  font-size: clamp(14px, 2.9vw, 24px);
  font-weight: 1000;
  line-height: 1.1;
  word-break: break-word;
}

#reto-resultado-screen.challenge-final-screen .reto-final-code-block strong {
  color: #fff;
  font-size: clamp(30px, 6vw, 50px);
  letter-spacing: 6px;
}

#reto-resultado-screen.challenge-final-screen .reto-final-copy {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
}

#reto-resultado-screen.challenge-final-screen .reto-final-wa,
#reto-resultado-screen.challenge-final-screen #reto-resultado-cerrar-btn {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 52px;
  margin: 2px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(180deg, #087dff, #004a9f);
  font-size: clamp(14px, 2.4vw, 20px);
  font-weight: 1000;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 12px 22px rgba(0, 0, 0, 0.3);
}

#reto-resultado-screen.challenge-final-screen .reto-final-wa::before {
  content: "☏";
  margin-right: 14px;
  font-size: 1.15em;
}

#reto-resultado-screen.challenge-final-screen .reto-final-more {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 0 0 9px;
  color: rgba(245, 250, 255, 0.66);
  font-size: clamp(11px, 1.8vw, 15px);
  font-weight: 1000;
  text-transform: uppercase;
}

#reto-resultado-screen.challenge-final-screen .reto-final-more::before,
#reto-resultado-screen.challenge-final-screen .reto-final-more::after {
  content: "";
  height: 1px;
  background: rgba(156, 203, 229, 0.45);
}

#reto-resultado-screen.challenge-final-screen .reto-final-options {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 12px;
}

#reto-resultado-screen.challenge-final-screen .reto-final-mode {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  align-items: center;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(125, 176, 211, 0.36);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(4, 48, 78, 0.9), rgba(0, 25, 45, 0.92));
  color: #fff;
  text-align: left;
}

#reto-resultado-screen.challenge-final-screen .reto-final-mode span {
  grid-row: 1 / span 2;
  font-size: 25px;
}

#reto-resultado-screen.challenge-final-screen .reto-final-mode strong {
  font-size: clamp(13px, 2.1vw, 18px);
  font-weight: 1000;
  text-transform: uppercase;
}

#reto-resultado-screen.challenge-final-screen .reto-final-mode small {
  color: rgba(245, 250, 255, 0.7);
  font-size: clamp(11px, 1.7vw, 14px);
  font-weight: 750;
}

#reto-resultado-screen.challenge-final-screen #reto-resultado-cerrar-btn {
  margin: 0;
}

#reto-resultado-screen.challenge-final-screen #reto-resultado-cerrar-btn::before {
  content: "←";
  margin-right: 18px;
}

@media (max-width: 680px) {
  #reto-resultado-screen.challenge-final-screen {
    padding: 8px 7px !important;
    align-items: flex-start !important;
  }

  #reto-resultado-screen.challenge-final-screen #reto-resultado-panel {
    border-radius: 18px !important;
    padding: 12px 10px !important;
  }

  #reto-resultado-screen.challenge-final-screen #reto-resultado-panel::before {
    height: 86px;
  }

  #reto-resultado-screen.challenge-final-screen #reto-resultado-icono {
    width: 48px;
    height: 48px;
    margin-bottom: 2px !important;
  }

  #reto-resultado-screen.challenge-final-screen .reto-dialog-titulo {
    font-size: clamp(26px, 9vw, 38px) !important;
  }

  #reto-resultado-screen.challenge-final-screen .reto-final-subtitle {
    margin-bottom: 10px;
    font-size: clamp(16px, 5vw, 20px);
  }

  #reto-resultado-screen.challenge-final-screen .reto-final-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  #reto-resultado-screen.challenge-final-screen .reto-final-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #reto-resultado-screen.challenge-final-screen .reto-final-stat {
    min-height: 86px;
    padding: 8px 5px;
  }

  #reto-resultado-screen.challenge-final-screen .reto-final-stat::before {
    font-size: 23px;
  }

  #reto-resultado-screen.challenge-final-screen .reto-final-stat span {
    font-size: clamp(10px, 3vw, 13px);
  }

  #reto-resultado-screen.challenge-final-screen .reto-final-stat strong {
    font-size: clamp(22px, 7vw, 30px);
  }

  #reto-resultado-screen.challenge-final-screen .reto-final-code-block strong {
    font-size: clamp(30px, 10vw, 42px);
    letter-spacing: 4px;
  }

  #reto-resultado-screen.challenge-final-screen .reto-final-share-block {
    padding: 9px 10px;
    margin-bottom: 8px;
  }

  #reto-resultado-screen.challenge-final-screen .reto-final-wa,
  #reto-resultado-screen.challenge-final-screen #reto-resultado-cerrar-btn {
    min-height: 46px;
    font-size: clamp(13px, 3.7vw, 17px);
  }

  #reto-resultado-screen.challenge-final-screen .reto-final-mode {
    min-height: 58px;
    padding: 8px 9px;
    gap: 1px 8px;
  }

  #reto-resultado-screen.challenge-final-screen .reto-final-mode span {
    font-size: 22px;
  }
}

/* Normal game final screen: stadium finish, scoped away from Camino and challenges. */
#resultado-final-screen.resultado-normal-final {
  min-height: 100svh !important;
  padding: 34px 18px !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg, rgba(0, 8, 18, 0.34), rgba(0, 4, 10, 0.58)),
    url("estadi.jpg") center / cover no-repeat !important;
  overflow-y: auto !important;
}

#resultado-final-screen.resultado-normal-final #resultado-final-panel {
  position: relative;
  width: min(100%, 890px) !important;
  max-width: 890px !important;
  margin: 0 auto !important;
  padding: clamp(24px, 3.5vw, 42px) clamp(18px, 3.8vw, 42px) !important;
  border: 2px solid rgba(205, 220, 232, 0.34) !important;
  border-radius: 38px !important;
  color: #f7fbff !important;
  background:
    radial-gradient(circle at 50% 13%, rgba(255, 194, 54, 0.24), transparent 18%),
    linear-gradient(180deg, rgba(0, 26, 48, 0.84), rgba(0, 12, 25, 0.82)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 26px 70px rgba(0, 0, 0, 0.48) !important;
  overflow: hidden;
}

#resultado-final-screen.resultado-normal-final #resultado-final-panel::before {
  content: "";
  position: absolute;
  inset: 16px 38px auto;
  height: 170px;
  pointer-events: none;
  background:
    linear-gradient(45deg, #006ec8 0 100%) 4% 36% / 20px 20px no-repeat,
    linear-gradient(45deg, #b99117 0 100%) 13% 23% / 18px 18px no-repeat,
    linear-gradient(45deg, #e7eef4 0 100%) 28% 27% / 18px 18px no-repeat,
    linear-gradient(45deg, #006ec8 0 100%) 17% 58% / 24px 24px no-repeat,
    linear-gradient(45deg, #224154 0 100%) 7% 62% / 17px 17px no-repeat,
    linear-gradient(45deg, #e7eef4 0 100%) 77% 25% / 21px 21px no-repeat,
    linear-gradient(45deg, #006ec8 0 100%) 85% 37% / 24px 24px no-repeat,
    linear-gradient(45deg, #b99117 0 100%) 98% 38% / 24px 24px no-repeat,
    linear-gradient(45deg, #006ec8 0 100%) 91% 12% / 19px 19px no-repeat,
    linear-gradient(45deg, #006ec8 0 100%) 75% 60% / 20px 20px no-repeat;
  opacity: 0.86;
}

#resultado-final-screen.resultado-normal-final .resultado-final-icono {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(98px, 14vw, 138px);
  height: clamp(98px, 14vw, 138px);
  margin: 0 auto 6px !important;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 204, 76, 0.36), transparent 62%);
  filter: drop-shadow(0 0 26px rgba(255, 191, 55, 0.52));
}

#resultado-final-screen.resultado-normal-final .resultado-final-icono img {
  width: 96%;
  height: 96%;
  object-fit: contain;
}

#resultado-final-screen.resultado-normal-final .resultado-final-titulo {
  position: relative;
  z-index: 1;
  margin: 2px 0 6px !important;
  color: #f7fbff !important;
  font-size: clamp(34px, 6.6vw, 58px) !important;
  line-height: 0.98 !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.55),
    0 9px 20px rgba(0, 0, 0, 0.42);
}

#resultado-final-screen.resultado-normal-final .resultado-final-subtitulo {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  color: #ffffff;
  font-size: clamp(20px, 3.4vw, 28px);
  font-weight: 900;
  line-height: 1.16;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.56);
}

#resultado-final-screen.resultado-normal-final .resultado-final-stats {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px !important;
  margin: 0 0 16px !important;
}

#resultado-final-screen.resultado-normal-final .rf-stat {
  min-width: 0 !important;
  min-height: 150px;
  padding: 22px 14px 18px !important;
  border: 1px solid rgba(125, 176, 211, 0.3);
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(4, 48, 78, 0.9), rgba(0, 25, 45, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 16px 34px rgba(0, 0, 0, 0.28);
}

#resultado-final-screen.resultado-normal-final .rf-stat::before {
  display: block;
  margin-bottom: 10px;
  color: #1b9eff;
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(30, 158, 255, 0.5));
}

#resultado-final-screen.resultado-normal-final .rf-stat:nth-child(1)::before { content: "🏆"; }
#resultado-final-screen.resultado-normal-final .rf-stat:nth-child(2)::before { content: "▮▮▮"; font-size: 29px; letter-spacing: -7px; transform: translateX(-4px); }
#resultado-final-screen.resultado-normal-final .rf-stat:nth-child(3)::before { content: "★"; }

#resultado-final-screen.resultado-normal-final .rf-stat:nth-child(4) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 18px 26px;
  min-height: 96px;
  padding: 18px !important;
}

#resultado-final-screen.resultado-normal-final .rf-stat:nth-child(4)::before {
  content: "🔥";
  grid-row: 1 / span 2;
  margin: 0;
  color: inherit;
  font-size: 46px;
  filter: none;
}

#resultado-final-screen.resultado-normal-final .rf-stat-label {
  color: rgba(245, 250, 255, 0.72) !important;
  font-size: clamp(15px, 2.3vw, 21px) !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  line-height: 1;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}

#resultado-final-screen.resultado-normal-final .rf-stat-valor {
  color: #f7fbff !important;
  font-size: clamp(34px, 5.7vw, 54px) !important;
  font-weight: 1000 !important;
  line-height: 0.96;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#resultado-final-screen.resultado-normal-final #resultado-final-puntos::first-letter,
#resultado-final-screen.resultado-normal-final #resultado-final-xp::first-letter {
  color: inherit;
}

#resultado-final-screen.resultado-normal-final .share-resultado {
  position: relative;
  z-index: 1;
  margin: 0 0 20px !important;
  padding: 18px 22px 20px;
  border: 2px solid rgba(125, 176, 211, 0.2);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(2, 49, 76, 0.86), rgba(0, 25, 41, 0.88));
}

#resultado-final-screen.resultado-normal-final .share-label {
  margin: 0 0 14px !important;
  color: rgba(245, 250, 255, 0.76) !important;
  font-size: clamp(14px, 2.3vw, 20px) !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
}

#resultado-final-screen.resultado-normal-final .share-btns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px !important;
}

#resultado-final-screen.resultado-normal-final .share-btn,
#resultado-final-screen.resultado-normal-final .resultado-final-acciones button {
  min-height: 64px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  font-size: clamp(16px, 2.6vw, 23px) !important;
  font-weight: 950 !important;
  line-height: 1.05;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 22px rgba(0, 0, 0, 0.3);
}

#resultado-final-screen.resultado-normal-final .share-btn::before,
#resultado-final-screen.resultado-normal-final .resultado-final-acciones button::before {
  display: inline-block;
  margin-right: 12px;
  font-size: 1.12em;
  vertical-align: -0.08em;
}

#resultado-final-screen.resultado-normal-final .share-wa::before { content: "☏"; }
#resultado-final-screen.resultado-normal-final .share-fb::before { content: "f"; font-family: Arial, sans-serif; font-weight: 1000; }
#resultado-final-screen.resultado-normal-final .share-copy::before { content: "🔗"; }

#resultado-final-screen.resultado-normal-final .share-wa {
  background: linear-gradient(180deg, #1ee257, #07872c) !important;
}

#resultado-final-screen.resultado-normal-final .share-fb,
#resultado-final-screen.resultado-normal-final #resultado-final-reto-btn {
  background: linear-gradient(180deg, #147bff, #0046a5) !important;
}

#resultado-final-screen.resultado-normal-final .share-copy {
  background: linear-gradient(180deg, #4b4f52, #1f2224) !important;
}

#resultado-final-screen.resultado-normal-final .resultado-final-acciones {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px !important;
}

#resultado-final-screen.resultado-normal-final #resultado-final-reto-btn::before { content: "👥"; }
#resultado-final-screen.resultado-normal-final #resultado-final-ranking-btn::before { content: "▮▮▮"; letter-spacing: -6px; transform: translateX(-3px); }
#resultado-final-screen.resultado-normal-final #resultado-final-inicio-btn::before { content: "←"; }

#resultado-final-screen.resultado-normal-final #resultado-final-ranking-btn {
  background: linear-gradient(180deg, #ffffff, #d7dce0) !important;
  color: #101820 !important;
}

#resultado-final-screen.resultado-normal-final #resultado-final-inicio-btn {
  grid-column: 1 / -1;
  margin-top: 8px;
  background: linear-gradient(180deg, #087dff, #004a9f) !important;
  text-transform: uppercase;
}

@media (max-width: 680px) {
  #resultado-final-screen.resultado-normal-final {
    padding: 18px 12px !important;
  }

  #resultado-final-screen.resultado-normal-final #resultado-final-panel {
    border-radius: 26px !important;
  }

  #resultado-final-screen.resultado-normal-final .resultado-final-stats,
  #resultado-final-screen.resultado-normal-final .share-btns,
  #resultado-final-screen.resultado-normal-final .resultado-final-acciones {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #resultado-final-screen.resultado-normal-final .rf-stat,
  #resultado-final-screen.resultado-normal-final .rf-stat:nth-child(4) {
    min-height: 102px;
    grid-column: auto;
    grid-template-columns: auto 1fr;
    justify-content: start;
    text-align: left;
  }

  #resultado-final-screen.resultado-normal-final .rf-stat::before {
    grid-row: 1 / span 2;
    margin: 0 4px 0 0;
  }

  #resultado-final-screen.resultado-normal-final #resultado-final-inicio-btn {
    grid-column: auto;
  }

  #resultado-final-screen.resultado-normal-final .share-btn,
  #resultado-final-screen.resultado-normal-final .resultado-final-acciones button {
    min-height: 62px !important;
  }
}

@media (max-width: 680px) {
  #resultado-final-screen.resultado-normal-final {
    padding: 10px 8px !important;
  }

  #resultado-final-screen.resultado-normal-final #resultado-final-panel {
    padding: 16px 12px 14px !important;
    border-radius: 22px !important;
  }

  #resultado-final-screen.resultado-normal-final #resultado-final-panel::before {
    height: 104px;
    inset: 10px 20px auto;
  }

  #resultado-final-screen.resultado-normal-final .resultado-final-icono {
    width: 70px;
    height: 70px;
    margin-bottom: 2px !important;
  }

  #resultado-final-screen.resultado-normal-final .resultado-final-titulo {
    margin-bottom: 4px !important;
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  #resultado-final-screen.resultado-normal-final .resultado-final-subtitulo {
    margin-bottom: 12px !important;
    font-size: clamp(17px, 5vw, 22px) !important;
  }

  #resultado-final-screen.resultado-normal-final .resultado-final-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  #resultado-final-screen.resultado-normal-final .rf-stat,
  #resultado-final-screen.resultado-normal-final .rf-stat:nth-child(4) {
    min-height: 84px !important;
    padding: 10px 8px !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 2px 8px !important;
    align-items: center !important;
    justify-content: start !important;
    text-align: left !important;
    grid-column: auto !important;
    border-radius: 14px !important;
  }

  #resultado-final-screen.resultado-normal-final .rf-stat::before,
  #resultado-final-screen.resultado-normal-final .rf-stat:nth-child(4)::before {
    grid-row: 1 / span 2 !important;
    margin: 0 !important;
    font-size: 28px !important;
  }

  #resultado-final-screen.resultado-normal-final .rf-stat-label {
    font-size: 12px !important;
  }

  #resultado-final-screen.resultado-normal-final .rf-stat-valor {
    font-size: clamp(25px, 7vw, 34px) !important;
  }

  #resultado-final-screen.resultado-normal-final .share-resultado {
    margin-bottom: 10px !important;
    padding: 10px 10px 12px !important;
    border-radius: 14px !important;
  }

  #resultado-final-screen.resultado-normal-final .share-label {
    margin-bottom: 8px !important;
    font-size: 13px !important;
  }

  #resultado-final-screen.resultado-normal-final .share-btns {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #resultado-final-screen.resultado-normal-final .share-btn {
    min-height: 44px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    font-size: clamp(11px, 3.2vw, 14px) !important;
  }

  #resultado-final-screen.resultado-normal-final .share-btn::before {
    display: block !important;
    margin: 0 0 2px !important;
    font-size: 1.05em !important;
    line-height: 1 !important;
  }

  #resultado-final-screen.resultado-normal-final .resultado-final-acciones {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #resultado-final-screen.resultado-normal-final .resultado-final-acciones button {
    min-height: 50px !important;
    padding: 0 8px !important;
    border-radius: 14px !important;
    font-size: clamp(13px, 3.6vw, 16px) !important;
  }

  #resultado-final-screen.resultado-normal-final .resultado-final-acciones button::before {
    margin-right: 6px !important;
  }

  #resultado-final-screen.resultado-normal-final #resultado-final-inicio-btn {
    grid-column: 1 / -1 !important;
    min-height: 50px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 380px), (max-height: 760px) {
  #resultado-final-screen.resultado-normal-final #resultado-final-panel {
    padding: 12px 10px !important;
  }

  #resultado-final-screen.resultado-normal-final .resultado-final-icono {
    width: 58px;
    height: 58px;
  }

  #resultado-final-screen.resultado-normal-final .resultado-final-titulo {
    font-size: clamp(26px, 8.4vw, 34px) !important;
  }

  #resultado-final-screen.resultado-normal-final .resultado-final-subtitulo {
    margin-bottom: 9px !important;
    font-size: 16px !important;
  }

  #resultado-final-screen.resultado-normal-final .rf-stat,
  #resultado-final-screen.resultado-normal-final .rf-stat:nth-child(4) {
    min-height: 72px !important;
  }

  #resultado-final-screen.resultado-normal-final .share-resultado {
    padding: 8px !important;
  }

  #resultado-final-screen.resultado-normal-final .share-btn,
  #resultado-final-screen.resultado-normal-final .resultado-final-acciones button,
  #resultado-final-screen.resultado-normal-final #resultado-final-inicio-btn {
    min-height: 42px !important;
  }
}

/* Camino Arlequinado final: daily completion summary. */
#resultado-final-screen.resultado-camino-final {
  min-height: 100svh !important;
  padding: 28px 18px !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg, rgba(0, 8, 18, 0.32), rgba(0, 4, 10, 0.58)),
    url("estadi.jpg") center / cover no-repeat !important;
  overflow-y: auto !important;
}

#resultado-final-screen.resultado-camino-final #resultado-final-panel {
  position: relative;
  width: min(100%, 860px) !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: clamp(26px, 3.5vw, 42px) clamp(18px, 3.8vw, 42px) !important;
  border: 2px solid rgba(205, 220, 232, 0.34) !important;
  border-radius: 34px !important;
  color: #f7fbff !important;
  background:
    radial-gradient(circle at 50% 13%, rgba(255, 210, 90, 0.25), transparent 20%),
    linear-gradient(180deg, rgba(0, 28, 54, 0.84), rgba(0, 13, 25, 0.84)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 26px 70px rgba(0, 0, 0, 0.48) !important;
  overflow: hidden;
}

#resultado-final-screen.resultado-camino-final #resultado-final-panel::before {
  content: "";
  position: absolute;
  inset: 16px 38px auto;
  height: 190px;
  pointer-events: none;
  background:
    linear-gradient(45deg, #006ec8 0 100%) 3% 30% / 22px 22px no-repeat,
    linear-gradient(45deg, #b99117 0 100%) 12% 18% / 17px 17px no-repeat,
    linear-gradient(45deg, #e7eef4 0 100%) 22% 46% / 17px 17px no-repeat,
    linear-gradient(45deg, #006ec8 0 100%) 16% 63% / 24px 24px no-repeat,
    linear-gradient(45deg, #b99117 0 100%) 63% 58% / 17px 17px no-repeat,
    linear-gradient(45deg, #e7eef4 0 100%) 76% 22% / 20px 20px no-repeat,
    linear-gradient(45deg, #006ec8 0 100%) 88% 35% / 24px 24px no-repeat,
    linear-gradient(45deg, #b99117 0 100%) 97% 22% / 23px 23px no-repeat;
  opacity: 0.86;
}

#resultado-final-screen.resultado-camino-final .resultado-final-icono {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(116px, 16vw, 160px);
  height: clamp(116px, 16vw, 160px);
  margin: 0 auto 8px !important;
  border-radius: 50%;
  border: 9px solid #ffd667;
  background:
    radial-gradient(circle, #ffe7a2 0 46%, #e4a51e 48% 72%, #b87307 74% 100%);
  box-shadow:
    0 0 42px rgba(255, 204, 88, 0.42),
    inset 0 2px 0 rgba(255, 255, 255, 0.52);
}

#resultado-final-screen.resultado-camino-final .resultado-final-icono::before,
#resultado-final-screen.resultado-camino-final .resultado-final-icono::after {
  content: "";
  position: absolute;
  top: -74px;
  width: 32px;
  height: 86px;
  background: linear-gradient(90deg, #00469d 0 35%, #f3f5fb 36% 64%, #00469d 65% 100%);
  transform-origin: bottom center;
  z-index: -1;
}

#resultado-final-screen.resultado-camino-final .resultado-final-icono::before {
  transform: rotate(-24deg);
}

#resultado-final-screen.resultado-camino-final .resultado-final-icono::after {
  transform: rotate(24deg);
}

#resultado-final-screen.resultado-camino-final .resultado-final-icono img {
  width: 68%;
  height: 68%;
  object-fit: contain;
}

#resultado-final-screen.resultado-camino-final .resultado-final-titulo {
  position: relative;
  z-index: 1;
  margin: 8px 0 8px !important;
  color: #f7fbff !important;
  font-size: clamp(34px, 6.6vw, 62px) !important;
  line-height: 0.98 !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.55),
    0 9px 20px rgba(0, 0, 0, 0.42);
}

#resultado-final-screen.resultado-camino-final .resultado-final-subtitulo {
  position: relative;
  z-index: 1;
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(21px, 3.5vw, 31px);
  font-weight: 900;
  line-height: 1.16;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.56);
}

#resultado-final-screen.resultado-camino-final .resultado-final-stats {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px !important;
  margin: 0 0 16px !important;
}

#resultado-final-screen.resultado-camino-final .rf-stat {
  min-width: 0 !important;
  min-height: 150px;
  padding: 22px 14px 18px !important;
  border: 1px solid rgba(125, 176, 211, 0.32);
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(4, 48, 78, 0.9), rgba(0, 25, 45, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 16px 34px rgba(0, 0, 0, 0.28);
}

#resultado-final-screen.resultado-camino-final .rf-stat::before {
  display: block;
  margin-bottom: 10px;
  color: #1b9eff;
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(30, 158, 255, 0.5));
}

#resultado-final-screen.resultado-camino-final .rf-stat:nth-child(1)::before { content: "★"; }
#resultado-final-screen.resultado-camino-final .rf-stat:nth-child(2)::before { content: "▮▮▮"; font-size: 29px; letter-spacing: -7px; transform: translateX(-4px); }
#resultado-final-screen.resultado-camino-final .rf-stat:nth-child(3)::before { content: "🔥"; filter: none; }

#resultado-final-screen.resultado-camino-final .rf-stat:nth-child(4) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 8px 22px;
  align-items: center;
  min-height: 170px;
  padding: 22px 26px !important;
  text-align: left;
}

#resultado-final-screen.resultado-camino-final .rf-stat:nth-child(4)::before {
  content: "";
  grid-row: 1 / span 3;
  width: 100px;
  height: 120px;
  margin: 0;
  background: url("logo.png") center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}

#resultado-final-screen.resultado-camino-final .rf-stat-label {
  color: rgba(245, 250, 255, 0.72) !important;
  font-size: clamp(15px, 2.3vw, 21px) !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  line-height: 1;
}

#resultado-final-screen.resultado-camino-final .rf-stat-valor {
  color: #f7fbff !important;
  font-size: clamp(34px, 5.7vw, 54px) !important;
  font-weight: 1000 !important;
  line-height: 0.96;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#resultado-final-screen.resultado-camino-final #resultado-final-puntos,
#resultado-final-screen.resultado-camino-final #resultado-final-xp {
  color: #249dff !important;
}

#resultado-final-screen.resultado-camino-final #resultado-final-racha {
  display: grid;
  gap: 9px;
  width: 100%;
  font-size: 18px !important;
}

#resultado-final-screen.resultado-camino-final .camino-final-level-xp {
  color: #249dff;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 1000;
}

#resultado-final-screen.resultado-camino-final .camino-final-progress {
  display: block;
  width: 100%;
  height: 25px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}

#resultado-final-screen.resultado-camino-final .camino-final-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #168bff, #22a8ff);
}

#resultado-final-screen.resultado-camino-final .camino-final-progress-copy {
  color: rgba(245, 250, 255, 0.78);
  font-size: clamp(15px, 2.4vw, 20px);
  font-weight: 750;
}

#resultado-final-screen.resultado-camino-final .share-resultado {
  position: relative;
  z-index: 1;
  margin: 0 0 18px !important;
  padding: 18px 22px 20px;
  border: 1px solid rgba(125, 176, 211, 0.26);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(2, 49, 76, 0.86), rgba(0, 25, 41, 0.88));
}

#resultado-final-screen.resultado-camino-final .share-label {
  margin: 0 0 14px !important;
  color: rgba(245, 250, 255, 0.76) !important;
  font-size: clamp(14px, 2.3vw, 20px) !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
}

#resultado-final-screen.resultado-camino-final .share-btns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px !important;
}

#resultado-final-screen.resultado-camino-final .share-btn,
#resultado-final-screen.resultado-camino-final .resultado-final-acciones button {
  min-height: 64px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  font-size: clamp(16px, 2.6vw, 23px) !important;
  font-weight: 950 !important;
  line-height: 1.05;
}

#resultado-final-screen.resultado-camino-final .share-wa { background: linear-gradient(180deg, #1ee257, #07872c) !important; }
#resultado-final-screen.resultado-camino-final .share-fb { background: linear-gradient(180deg, #147bff, #0046a5) !important; }
#resultado-final-screen.resultado-camino-final .share-copy { background: linear-gradient(180deg, #4b4f52, #1f2224) !important; }

#resultado-final-screen.resultado-camino-final .resultado-final-acciones {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 14px !important;
}

#resultado-final-screen.resultado-camino-final #resultado-final-reto-btn {
  background: linear-gradient(180deg, rgba(10, 79, 130, 0.95), rgba(0, 43, 78, 0.95)) !important;
  color: #8fd3ff !important;
  cursor: default;
}

#resultado-final-screen.resultado-camino-final #resultado-final-inicio-btn {
  background: linear-gradient(180deg, #087dff, #004a9f) !important;
  text-transform: uppercase;
}

@media (max-width: 680px) {
  #resultado-final-screen.resultado-camino-final {
    padding: 18px 12px !important;
  }

  #resultado-final-screen.resultado-camino-final #resultado-final-panel {
    border-radius: 26px !important;
  }

  #resultado-final-screen.resultado-camino-final .resultado-final-stats,
  #resultado-final-screen.resultado-camino-final .share-btns {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #resultado-final-screen.resultado-camino-final .rf-stat,
  #resultado-final-screen.resultado-camino-final .rf-stat:nth-child(4) {
    min-height: 102px;
    grid-column: auto;
    grid-template-columns: auto 1fr;
    justify-content: start;
    text-align: left;
  }

  #resultado-final-screen.resultado-camino-final .rf-stat::before {
    grid-row: 1 / span 2;
    margin: 0 4px 0 0;
  }

  #resultado-final-screen.resultado-camino-final .rf-stat:nth-child(4)::before {
    width: 68px;
    height: 82px;
  }

  #resultado-final-screen.resultado-camino-final .share-btn,
  #resultado-final-screen.resultado-camino-final .resultado-final-acciones button {
    min-height: 62px !important;
  }
}

@media (max-width: 680px) {
  #resultado-final-screen.resultado-camino-final {
    padding: 10px 8px !important;
  }

  #resultado-final-screen.resultado-camino-final #resultado-final-panel {
    padding: 14px 12px 14px !important;
    border-radius: 22px !important;
  }

  #resultado-final-screen.resultado-camino-final #resultado-final-panel::before {
    height: 104px;
    inset: 10px 20px auto;
  }

  #resultado-final-screen.resultado-camino-final .resultado-final-icono {
    width: 72px;
    height: 72px;
    border-width: 5px;
    margin-bottom: 2px !important;
  }

  #resultado-final-screen.resultado-camino-final .resultado-final-icono::before,
  #resultado-final-screen.resultado-camino-final .resultado-final-icono::after {
    top: -42px;
    width: 18px;
    height: 52px;
  }

  #resultado-final-screen.resultado-camino-final .resultado-final-titulo {
    margin: 4px 0 4px !important;
    font-size: clamp(28px, 8.8vw, 40px) !important;
  }

  #resultado-final-screen.resultado-camino-final .resultado-final-subtitulo {
    margin-bottom: 10px !important;
    font-size: clamp(16px, 4.8vw, 21px) !important;
  }

  #resultado-final-screen.resultado-camino-final .resultado-final-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  #resultado-final-screen.resultado-camino-final .rf-stat,
  #resultado-final-screen.resultado-camino-final .rf-stat:nth-child(4) {
    min-height: 84px !important;
    padding: 10px 8px !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 2px 8px !important;
    align-items: center !important;
    justify-content: start !important;
    text-align: left !important;
    grid-column: auto !important;
    border-radius: 14px !important;
  }

  #resultado-final-screen.resultado-camino-final .rf-stat:nth-child(4) {
    grid-column: 1 / -1 !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    min-height: 96px !important;
  }

  #resultado-final-screen.resultado-camino-final .rf-stat::before,
  #resultado-final-screen.resultado-camino-final .rf-stat:nth-child(4)::before {
    grid-row: 1 / span 2 !important;
    margin: 0 !important;
    font-size: 28px !important;
  }

  #resultado-final-screen.resultado-camino-final .rf-stat:nth-child(4)::before {
    width: 50px !important;
    height: 60px !important;
    grid-row: 1 / span 3 !important;
  }

  #resultado-final-screen.resultado-camino-final .rf-stat-label {
    font-size: 12px !important;
  }

  #resultado-final-screen.resultado-camino-final .rf-stat-valor {
    font-size: clamp(25px, 7vw, 34px) !important;
  }

  #resultado-final-screen.resultado-camino-final #resultado-final-racha {
    gap: 4px !important;
  }

  #resultado-final-screen.resultado-camino-final .camino-final-level-xp {
    font-size: clamp(21px, 6vw, 28px) !important;
  }

  #resultado-final-screen.resultado-camino-final .camino-final-progress {
    height: 14px !important;
  }

  #resultado-final-screen.resultado-camino-final .camino-final-progress-copy {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  #resultado-final-screen.resultado-camino-final .share-resultado {
    margin-bottom: 10px !important;
    padding: 10px 10px 12px !important;
    border-radius: 14px !important;
  }

  #resultado-final-screen.resultado-camino-final .share-label {
    margin-bottom: 8px !important;
    font-size: 13px !important;
  }

  #resultado-final-screen.resultado-camino-final .share-btns {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #resultado-final-screen.resultado-camino-final .share-btn {
    min-height: 44px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    font-size: clamp(11px, 3.2vw, 14px) !important;
  }

  #resultado-final-screen.resultado-camino-final .resultado-final-acciones {
    gap: 8px !important;
  }

  #resultado-final-screen.resultado-camino-final .resultado-final-acciones button {
    min-height: 48px !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    font-size: clamp(13px, 3.6vw, 16px) !important;
  }
}

@media (max-width: 380px), (max-height: 760px) {
  #resultado-final-screen.resultado-camino-final #resultado-final-panel {
    padding: 11px 10px !important;
  }

  #resultado-final-screen.resultado-camino-final .resultado-final-icono {
    width: 58px;
    height: 58px;
  }

  #resultado-final-screen.resultado-camino-final .resultado-final-icono::before,
  #resultado-final-screen.resultado-camino-final .resultado-final-icono::after {
    top: -34px;
    height: 42px;
  }

  #resultado-final-screen.resultado-camino-final .resultado-final-titulo {
    font-size: clamp(25px, 8.2vw, 34px) !important;
  }

  #resultado-final-screen.resultado-camino-final .resultado-final-subtitulo {
    margin-bottom: 8px !important;
    font-size: 15px !important;
  }

  #resultado-final-screen.resultado-camino-final .rf-stat,
  #resultado-final-screen.resultado-camino-final .rf-stat:nth-child(4) {
    min-height: 72px !important;
  }

  #resultado-final-screen.resultado-camino-final .share-resultado {
    padding: 8px !important;
  }

  #resultado-final-screen.resultado-camino-final .share-btn,
  #resultado-final-screen.resultado-camino-final .resultado-final-acciones button {
    min-height: 42px !important;
  }
}

/* Normal game mode selector: visual refresh only. */
.mode-select-screen:has(#modo-selector) {
  align-items: center !important;
  min-height: 100dvh !important;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)) !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(8, 112, 255, 0.16), transparent 34%),
    radial-gradient(circle at 50% 12%, rgba(2, 116, 255, 0.16), transparent 30%),
    rgba(0, 5, 16, 0.9) !important;
  backdrop-filter: blur(10px);
}

.mode-select-screen:has(#modo-selector) .mode-select-panel {
  width: min(100%, 464px) !important;
  max-width: 464px !important;
  max-height: calc(100dvh - max(48px, env(safe-area-inset-top)) - max(48px, env(safe-area-inset-bottom))) !important;
  padding: 32px 22px 20px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(35, 115, 255, 0.78) !important;
  background:
    radial-gradient(circle at 50% 15%, rgba(0, 118, 255, 0.22), transparent 26%),
    linear-gradient(180deg, rgba(3, 24, 54, 0.96), rgba(0, 8, 23, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 36px 80px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(0, 88, 255, 0.16) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.mode-select-screen:has(#modo-selector) .mode-select-hero {
  width: 74px;
  height: 74px;
  margin-bottom: 14px;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.46), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(71, 193, 255, 0.36), transparent 48%),
    linear-gradient(180deg, #19a6ff, #064ccc);
  box-shadow:
    0 0 0 1px rgba(119, 196, 255, 0.42),
    0 0 42px rgba(16, 128, 255, 0.5);
}

.mode-select-screen:has(#modo-selector) .mode-select-hero-normal::before {
  content: "";
  width: 29px;
  height: 29px;
  border: 3px solid rgba(236, 247, 255, 0.96);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 6px rgba(7, 72, 190, 0.94),
    0 0 14px rgba(255, 255, 255, 0.38);
}

.mode-select-screen:has(#modo-selector) .mode-select-hero::after {
  inset: -18px;
  background:
    radial-gradient(circle at 16px 10px, rgba(35, 157, 255, 0.9) 0 2px, transparent 2.5px),
    radial-gradient(circle at 68px 4px, rgba(35, 157, 255, 0.7) 0 2px, transparent 2.5px),
    radial-gradient(circle at 88px 50px, rgba(35, 157, 255, 0.7) 0 2px, transparent 2.5px),
    radial-gradient(circle at 2px 58px, rgba(35, 157, 255, 0.62) 0 2px, transparent 2.5px);
}

.mode-select-screen:has(#modo-selector) .mode-select-title {
  margin: 0 0 8px !important;
  font-size: clamp(28px, 5.4vw, 32px) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
}

.mode-select-screen:has(#modo-selector) .mode-select-subtitle {
  margin: 0 0 28px !important;
  color: rgba(224, 237, 255, 0.82);
  font-size: clamp(16px, 3.4vw, 18px);
  font-weight: 650;
}

.mode-select-screen:has(#modo-selector) .mode-select-subtitle::after {
  display: none;
}

.mode-select-screen:has(#modo-selector) #modo-selector {
  gap: 14px !important;
  margin: 0 0 26px !important;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto {
  min-height: 128px !important;
  padding: 22px 56px 22px 118px !important;
  border-radius: 16px !important;
  border-color: rgba(0, 98, 255, 0.86) !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(35, 147, 255, 0.28), transparent 22%),
    linear-gradient(180deg, rgba(4, 33, 78, 0.95), rgba(1, 15, 43, 0.98)) !important;
  font-size: 25px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 16px 34px rgba(0, 0, 0, 0.26),
    0 0 24px rgba(0, 98, 255, 0.14) !important;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto[data-modo="10"] {
  border-color: rgba(17, 198, 185, 0.84) !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(18, 218, 178, 0.25), transparent 22%),
    linear-gradient(180deg, rgba(5, 48, 70, 0.95), rgba(1, 19, 39, 0.98)) !important;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto[data-modo="20"] {
  border-color: rgba(157, 55, 255, 0.88) !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(164, 55, 255, 0.26), transparent 22%),
    linear-gradient(180deg, rgba(30, 12, 78, 0.95), rgba(8, 6, 41, 0.98)) !important;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto::before {
  left: 22px;
  width: 72px;
  height: 72px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.36), transparent 18%),
    linear-gradient(180deg, #1bb8ff, #0657cf);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 28px rgba(0, 132, 255, 0.42);
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto[data-modo="10"]::before {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.34), transparent 18%),
    linear-gradient(180deg, #22d7bf, #067c83);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 28px rgba(11, 210, 172, 0.42);
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto[data-modo="20"]::before {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.36), transparent 18%),
    linear-gradient(180deg, #a944ff, #5611b4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 28px rgba(157, 55, 255, 0.46);
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-icono {
  left: 22px;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: none !important;
  color: #dff3ff !important;
  font-size: 0 !important;
  line-height: 1;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-icono::before {
  font-size: 38px;
  font-weight: 900;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.35));
}

.mode-select-screen:has(#modo-selector) #modo-selector [data-modo="5"] .btn-tipo-icono::before {
  content: "⚡";
}

.mode-select-screen:has(#modo-selector) #modo-selector [data-modo="10"] .btn-tipo-icono::before {
  content: "☆";
  color: #cffff0;
}

.mode-select-screen:has(#modo-selector) #modo-selector [data-modo="20"] .btn-tipo-icono::before {
  content: "♕";
  color: #f1d6ff;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto::after {
  right: 24px;
  color: #ffffff;
  font-size: 48px;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto > span:not(.btn-tipo-icono) {
  font-size: 25px !important;
  font-weight: 950 !important;
  line-height: 1.1;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto small {
  margin-top: 6px;
  color: rgba(226, 239, 255, 0.76) !important;
  font-size: 17px !important;
  font-weight: 650 !important;
}

.mode-select-screen:has(#modo-selector) #modo-selector-cancelar-btn {
  width: min(100%, 272px) !important;
  min-height: 60px !important;
  margin: 0 auto !important;
  border-radius: 999px !important;
  border-color: rgba(61, 162, 255, 0.74) !important;
  background: linear-gradient(180deg, #168dff, #064fca) !important;
  font-size: 22px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 18px 34px rgba(0, 87, 205, 0.35) !important;
}

@media (max-width: 520px) {
  .mode-select-screen:has(#modo-selector) {
    padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)) !important;
  }

  .mode-select-screen:has(#modo-selector) .mode-select-panel {
    width: min(100%, 390px) !important;
    max-height: calc(100dvh - max(28px, env(safe-area-inset-top)) - max(28px, env(safe-area-inset-bottom))) !important;
    padding: 26px 16px 18px !important;
    border-radius: 16px !important;
  }

  .mode-select-screen:has(#modo-selector) .mode-select-hero {
    width: 62px;
    height: 62px;
  }

  .mode-select-screen:has(#modo-selector) .mode-select-title {
    font-size: 25px !important;
  }

  .mode-select-screen:has(#modo-selector) .mode-select-subtitle {
    font-size: 15px;
    margin-bottom: 22px !important;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector {
    gap: 12px !important;
    margin-bottom: 22px !important;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto {
    min-height: 104px !important;
    padding: 18px 42px 18px 92px !important;
    border-radius: 14px !important;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto::before,
  .mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-icono {
    left: 18px;
    width: 56px;
    height: 56px;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-icono::before {
    font-size: 31px;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto::after {
    right: 18px;
    font-size: 38px;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto > span:not(.btn-tipo-icono) {
    font-size: 21px !important;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto small {
    font-size: 14px !important;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector-cancelar-btn {
    min-height: 54px !important;
    font-size: 18px !important;
  }
}

@media (max-width: 390px), (max-height: 740px) {
  .mode-select-screen:has(#modo-selector) {
    justify-content: flex-start !important;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
  }

  .mode-select-screen:has(#modo-selector) .mode-select-panel {
    width: min(100%, 360px) !important;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
    padding: 18px 12px 14px !important;
  }

  .mode-select-screen:has(#modo-selector) .mode-select-hero {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }

  .mode-select-screen:has(#modo-selector) .mode-select-title {
    margin-bottom: 5px !important;
    font-size: 22px !important;
  }

  .mode-select-screen:has(#modo-selector) .mode-select-subtitle {
    margin-bottom: 14px !important;
    font-size: 13px;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector {
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto {
    min-height: 82px !important;
    padding: 12px 34px 12px 76px !important;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto::before,
  .mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-icono {
    left: 14px;
    width: 46px;
    height: 46px;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto::after {
    right: 14px;
    font-size: 30px;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto > span:not(.btn-tipo-icono) {
    font-size: 18px !important;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto small {
    font-size: 12px !important;
  }

  .mode-select-screen:has(#modo-selector) #modo-selector-cancelar-btn {
    min-height: 46px !important;
    font-size: 16px !important;
  }
}

@media (min-width: 391px) and (max-width: 768px) {
  #reto-tipo-screen,
  .mode-select-screen:has(#modo-selector) {
    align-items: center !important;
    justify-content: center !important;
  }

  #reto-tipo-panel {
    margin-bottom: clamp(44px, 8dvh, 84px) !important;
  }
}

/* Challenge share screen: keep code, share actions, modes and Inicio visible without scroll. */
#reto-crear-screen.reto-share-ready {
  padding: 10px 12px !important;
  overflow: hidden !important;
}

#reto-crear-screen.reto-share-ready #reto-crear-panel {
  width: min(100%, 352px) !important;
  max-width: 352px !important;
  max-height: none !important;
  padding: 16px 14px 12px !important;
  overflow: hidden !important;
}

#reto-crear-screen.reto-share-ready .reto-dialog-icono {
  display: none !important;
}

#reto-crear-screen.reto-share-ready .reto-dialog-titulo {
  margin: 0 0 6px !important;
  font-size: 27px !important;
  line-height: 1 !important;
}

#reto-crear-screen.reto-share-ready #reto-crear-estado {
  display: none !important;
}

#reto-crear-screen.reto-share-ready #reto-codigo-generado {
  display: block !important;
}

#reto-crear-screen.reto-share-ready .reto-codigo-label,
#reto-crear-screen.reto-share-ready .reto-enlace-label,
#reto-crear-screen.reto-share-ready .reto-codigo-hint {
  font-size: 10px !important;
  line-height: 1.05 !important;
}

#reto-crear-screen.reto-share-ready .reto-codigo-label {
  margin-bottom: 6px !important;
}

#reto-crear-screen.reto-share-ready .reto-codigo-valor {
  min-height: 64px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  font-size: 38px !important;
  line-height: 1 !important;
  letter-spacing: 8px !important;
}

#reto-crear-screen.reto-share-ready .reto-copy-feedback {
  margin: 4px 0 !important;
  font-size: 11px !important;
}

#reto-crear-screen.reto-share-ready .reto-enlace-wrap {
  margin: 8px 0 !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
}

#reto-crear-screen.reto-share-ready .reto-enlace-valor {
  min-height: 28px !important;
  margin: 4px 0 8px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

#reto-crear-screen.reto-share-ready #reto-copiar-enlace-btn,
#reto-crear-screen.reto-share-ready #reto-whatsapp-btn,
#reto-crear-screen.reto-share-ready #reto-created-home-btn {
  min-height: 38px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  font-size: 13px !important;
}

#reto-crear-screen.reto-share-ready #reto-whatsapp-btn {
  margin-top: 8px !important;
}

#reto-crear-screen.reto-share-ready .reto-codigo-hint {
  margin: 8px 0 !important;
  color: rgba(220, 239, 255, 0.72) !important;
}

#reto-crear-screen.reto-share-ready #reto-mode-selector {
  display: grid !important;
  gap: 6px !important;
  margin: 8px 0 8px !important;
}

#reto-crear-screen.reto-share-ready .reto-mode-option {
  min-height: 48px !important;
  padding: 7px 34px 7px 62px !important;
  border-radius: 8px !important;
  gap: 2px !important;
}

#reto-crear-screen.reto-share-ready .reto-mode-option::before {
  left: 14px !important;
  width: 34px !important;
  height: 34px !important;
}

#reto-crear-screen.reto-share-ready .reto-mode-option::after {
  right: 12px !important;
  font-size: 24px !important;
}

#reto-crear-screen.reto-share-ready .reto-mode-option-title {
  font-size: 14px !important;
  line-height: 1.05 !important;
}

#reto-crear-screen.reto-share-ready .reto-mode-option-meta {
  font-size: 9.5px !important;
  line-height: 1.05 !important;
}

#reto-crear-screen.reto-share-ready #reto-created-home-btn {
  min-height: 42px !important;
  margin-top: 4px !important;
}

@media (max-height: 650px) {
  #reto-crear-screen.reto-share-ready #reto-crear-panel {
    transform: scale(0.94);
    transform-origin: center center;
  }
}

/* Completed challenge comparison: premium result table. */
#reto-resultado-screen:not(.challenge-final-screen) #reto-resultado-panel {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  padding: 28px 20px 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(54, 154, 255, 0.72) !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(36, 137, 255, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(2, 24, 50, 0.97), rgba(0, 8, 20, 0.98)) !important;
  color: #f7fbff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 28px 70px rgba(0, 0, 0, 0.52),
    0 0 34px rgba(24, 136, 255, 0.12) !important;
}

#reto-resultado-screen:not(.challenge-final-screen) #reto-resultado-icono {
  margin: 0 auto 8px !important;
  font-size: 44px !important;
  filter: drop-shadow(0 0 18px rgba(30, 158, 255, 0.42));
}

#reto-resultado-screen:not(.challenge-final-screen) .reto-dialog-titulo {
  margin: 0 0 10px !important;
  color: #fff !important;
  font-size: 31px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

#reto-resultado-screen:not(.challenge-final-screen) .reto-veredicto {
  margin: 10px 0 14px !important;
  padding: 15px 14px !important;
  border-radius: 14px !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

#reto-resultado-screen:not(.challenge-final-screen) .reto-veredicto.ganado {
  background: linear-gradient(180deg, rgba(21, 206, 104, 0.95), rgba(6, 125, 55, 0.95)) !important;
  color: #fff !important;
}

#reto-resultado-screen:not(.challenge-final-screen) .reto-veredicto.perdido {
  background: linear-gradient(180deg, rgba(236, 72, 85, 0.92), rgba(135, 20, 31, 0.94)) !important;
  color: #fff !important;
}

/* Created challenge screen: match the final handoff hierarchy. */
#reto-crear-screen.reto-share-ready {
  padding: 18px 14px !important;
  overflow-y: auto !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 118, 255, 0.16), transparent 34%),
    rgba(0, 5, 14, 0.78) !important;
}

#reto-crear-screen.reto-share-ready #reto-crear-panel {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  max-height: none !important;
  padding: 28px 18px 20px !important;
  border-radius: 22px !important;
  border: 2px solid rgba(0, 132, 255, 0.78) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 118, 255, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(1, 26, 58, 0.96), rgba(0, 9, 25, 0.98)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 22px 70px rgba(0, 0, 0, 0.5),
    0 0 42px rgba(0, 116, 255, 0.22) !important;
  text-align: center !important;
  overflow: visible !important;
}

#reto-crear-screen.reto-share-ready .reto-dialog-icono {
  display: grid !important;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 14px !important;
  border-radius: 999px;
  border: 4px solid rgba(101, 255, 184, 0.82);
  background: linear-gradient(180deg, #22df84, #069044);
  color: transparent !important;
  font-size: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 0 28px rgba(25, 220, 124, 0.3);
}

#reto-crear-screen.reto-share-ready .reto-dialog-icono::before {
  content: "✓";
  color: #ffffff;
  font-size: 46px;
  line-height: 1;
  font-weight: 1000;
}

#reto-crear-screen.reto-share-ready .reto-dialog-titulo {
  max-width: 100% !important;
  margin: 0 auto 8px !important;
  color: #ffffff !important;
  font-size: clamp(30px, 8vw, 42px) !important;
  line-height: 0.98 !important;
  font-weight: 1000 !important;
  text-transform: uppercase;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.42);
}

#reto-crear-screen.reto-share-ready #reto-crear-estado {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px !important;
}

#reto-crear-screen.reto-share-ready .reto-created-waiting {
  color: rgba(234, 242, 255, 0.9);
  font-size: 20px;
  line-height: 1.1;
  font-weight: 750;
}

#reto-crear-screen.reto-share-ready .reto-created-expiry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(13, 75, 142, 0.82), rgba(2, 38, 88, 0.9));
  color: #ffffff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#reto-crear-screen.reto-share-ready #reto-codigo-generado {
  display: grid !important;
  gap: 0;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 18px !important;
  padding: 18px 16px 14px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(0, 113, 226, 0.62) !important;
  background:
    linear-gradient(180deg, rgba(4, 45, 91, 0.78), rgba(0, 18, 46, 0.86)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#reto-crear-screen.reto-share-ready #reto-created-mode-summary {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 0 0 14px;
  text-align: left;
}

#reto-crear-screen.reto-share-ready .reto-created-mode-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 2px solid #ffd51d;
  background: rgba(255, 213, 29, 0.12);
  font-size: 30px;
  filter: drop-shadow(0 0 12px rgba(255, 213, 29, 0.18));
}

#reto-crear-screen.reto-share-ready .reto-created-mode-copy strong {
  display: block;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 1000;
}

#reto-crear-screen.reto-share-ready .reto-created-mode-copy span {
  display: block;
  margin-top: 5px;
  color: rgba(226, 237, 255, 0.82);
  font-size: 16px;
  line-height: 1.15;
  font-weight: 700;
}

#reto-crear-screen.reto-share-ready .reto-codigo-label {
  margin: 0 !important;
  color: rgba(229, 238, 255, 0.82) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-transform: uppercase;
}

#reto-crear-screen.reto-share-ready .reto-codigo-valor {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 76px !important;
  margin-top: -1px;
  padding: 12px 64px 12px 14px !important;
  border-radius: 16px !important;
  border: 2px dashed rgba(0, 132, 255, 0.72) !important;
  background: rgba(0, 12, 31, 0.66) !important;
  color: #ffffff !important;
  font-size: clamp(35px, 10vw, 52px) !important;
  line-height: 1 !important;
  letter-spacing: clamp(4px, 1.4vw, 8px) !important;
  font-weight: 1000 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.44);
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#reto-crear-screen.reto-share-ready .reto-codigo-valor::after {
  content: "⧉";
  position: absolute;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #178dff, #075bbd);
  color: #dff4ff;
  font-size: 27px;
  letter-spacing: 0;
  box-shadow: 0 8px 20px rgba(0, 102, 220, 0.36);
}

#reto-crear-screen.reto-share-ready .reto-copy-feedback {
  margin: 8px 0 0 !important;
}

#reto-crear-screen.reto-share-ready .reto-enlace-wrap,
#reto-crear-screen.reto-share-ready .reto-codigo-hint {
  display: none !important;
}

#reto-crear-screen.reto-share-ready #reto-play-now-btn,
#reto-crear-screen.reto-share-ready #reto-whatsapp-btn,
#reto-crear-screen.reto-share-ready #reto-copiar-enlace-btn,
#reto-crear-screen.reto-share-ready #reto-created-home-btn {
  width: 100% !important;
  box-sizing: border-box;
  margin: 0 0 12px !important;
  border-radius: 14px !important;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: normal !important;
  line-height: 1.08 !important;
  text-align: center !important;
}

#reto-crear-screen.reto-share-ready #reto-play-now-btn {
  min-height: 70px !important;
  border: 1px solid rgba(105, 205, 255, 0.66) !important;
  background: linear-gradient(180deg, #0b9bff, #006bd8) !important;
  color: #ffffff !important;
  font-size: clamp(22px, 5.6vw, 30px) !important;
  font-weight: 1000 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 15px 28px rgba(0, 111, 229, 0.35) !important;
}

#reto-crear-screen.reto-share-ready #reto-play-now-btn::before {
  content: "▶";
  margin-right: 18px;
}

#reto-crear-screen.reto-share-ready #reto-whatsapp-btn {
  min-height: 58px !important;
  border: 1px solid rgba(64, 244, 126, 0.66) !important;
  background: linear-gradient(180deg, #10c65b, #07923d) !important;
  color: #ffffff !important;
  font-size: clamp(17px, 4.4vw, 22px) !important;
  font-weight: 1000 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 12px 24px rgba(0, 135, 54, 0.3) !important;
}

#reto-crear-screen.reto-share-ready #reto-whatsapp-btn::before {
  content: "☏";
  margin-right: 14px;
  font-size: 28px;
  line-height: 0;
}

#reto-crear-screen.reto-share-ready #reto-copiar-enlace-btn {
  min-height: 58px !important;
  border: 2px solid rgba(0, 132, 255, 0.72) !important;
  background: rgba(1, 18, 42, 0.78) !important;
  color: #ffffff !important;
  font-size: clamp(17px, 4.4vw, 22px) !important;
  font-weight: 1000 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#reto-crear-screen.reto-share-ready #reto-copiar-enlace-btn::before {
  content: "🔗";
  margin-right: 14px;
}

#reto-crear-screen.reto-share-ready #reto-created-home-btn {
  min-height: 42px !important;
  margin: 6px 0 0 !important;
  border: none !important;
  background: transparent !important;
  color: #2a9cff !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

@media (max-width: 380px) {
  #reto-crear-screen.reto-share-ready #reto-crear-panel {
    padding: 24px 12px 18px !important;
  }

  #reto-crear-screen.reto-share-ready #reto-codigo-generado {
    padding: 16px 12px 12px !important;
  }

  #reto-crear-screen.reto-share-ready .reto-codigo-valor {
    letter-spacing: 6px !important;
    padding-right: 66px !important;
  }
}

#reto-resultado-screen:not(.challenge-final-screen) .reto-veredicto.empate {
  background: linear-gradient(180deg, rgba(24, 143, 255, 0.95), rgba(5, 76, 176, 0.95)) !important;
  color: #fff !important;
}

#reto-resultado-screen:not(.challenge-final-screen) .reto-resultado-tabla {
  width: 100%;
  margin: 0 0 16px !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
  font-size: 14px !important;
}

#reto-resultado-screen:not(.challenge-final-screen) .reto-resultado-tabla th {
  padding: 8px 10px !important;
  border: 0 !important;
  background: rgba(226, 242, 255, 0.94) !important;
  color: #0b5aaf !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

#reto-resultado-screen:not(.challenge-final-screen) .reto-resultado-tabla th.reto-col-mia {
  color: #0044a7 !important;
  background: linear-gradient(180deg, #dff2ff, #9ed8ff) !important;
}

#reto-resultado-screen:not(.challenge-final-screen) .reto-resultado-tabla td {
  padding: 11px 10px !important;
  border: 0 !important;
  background: rgba(5, 31, 58, 0.76) !important;
  color: rgba(235, 246, 255, 0.86) !important;
}

#reto-resultado-screen:not(.challenge-final-screen) .reto-resultado-tabla td:first-child {
  border-radius: 10px 0 0 10px;
  color: rgba(177, 207, 235, 0.78) !important;
}

#reto-resultado-screen:not(.challenge-final-screen) .reto-resultado-tabla td:last-child {
  border-radius: 0 10px 10px 0;
}

#reto-resultado-screen:not(.challenge-final-screen) .reto-resultado-tabla td:nth-child(2),
#reto-resultado-screen:not(.challenge-final-screen) .reto-resultado-tabla td:nth-child(3) {
  font-weight: 850;
  text-align: center;
}

#reto-resultado-screen:not(.challenge-final-screen) #reto-resultado-cerrar-btn {
  width: 100%;
  min-height: 48px !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #1186ff, #004cae) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

/* Retos: el comodin Saltar no existe en este modo. Esta regla queda al final
   para ganar a los ajustes mobile antiguos que fuerzan display con !important. */
body.reto-game-active #comodin-saltar,
body:has(#reto-mode-badge:not(.hidden)) #comodin-saltar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Challenge creation flow: mode is selected before creating; the share screen only shares the created challenge. */
#reto-crear-screen.reto-share-ready #reto-mode-selector {
  display: none !important;
}

#reto-crear-screen.reto-share-ready #reto-crear-estado {
  display: block !important;
  min-height: auto !important;
  margin: 4px 0 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(220, 239, 255, 0.78) !important;
}

body.reto-game-active #vidas-externas,
body.reto-game-active #vidas-externas-mobile {
  display: none !important;
}

/* Mis retos: keep Inicio always reachable while the challenge list scrolls. */
#retos-screen:not(.hidden) {
  height: calc(100svh - clamp(24px, 7vh, 64px)) !important;
  max-height: calc(100svh - clamp(24px, 7vh, 64px)) !important;
  min-height: 0 !important;
  margin: clamp(12px, 3.5vh, 32px) auto !important;
  padding: 22px 18px 14px !important;
  overflow: hidden !important;
}

#retos-screen:not(.hidden) #retos-screen-title,
#retos-screen:not(.hidden) #retos-tabs,
#retos-screen:not(.hidden) #retos-back-btn {
  flex: 0 0 auto !important;
}

#retos-screen:not(.hidden) #retos-screen-title {
  margin-bottom: 12px !important;
}

#retos-screen:not(.hidden) #retos-tabs {
  margin: 10px 0 12px !important;
}

#retos-screen:not(.hidden) #retos-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 2px 12px !important;
  scrollbar-width: thin;
}

#retos-screen:not(.hidden) #retos-back-btn {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
  margin: 10px 0 0 !important;
  min-height: 50px !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 -10px 24px rgba(0, 6, 16, 0.56),
    0 10px 22px rgba(0, 60, 150, 0.28) !important;
}

@media (max-width: 520px) {
  #retos-screen:not(.hidden) {
    width: min(calc(100% - 18px), 560px) !important;
    height: calc(100svh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))) !important;
    max-height: calc(100svh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom))) !important;
    margin: max(9px, env(safe-area-inset-top)) auto max(9px, env(safe-area-inset-bottom)) !important;
    padding: 18px 14px 12px !important;
  }

  #retos-screen:not(.hidden) #retos-back-btn {
    min-height: 48px !important;
  }
}

/* Small iPhone correction for the main challenge type screen only. */
@media (max-width: 380px), (max-height: 700px) {
  #reto-tipo-screen {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  #reto-tipo-panel {
    width: min(100%, 326px) !important;
    max-width: 326px !important;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
    padding: 16px 12px 12px !important;
    border-radius: 14px !important;
    overflow-y: auto !important;
  }

  #reto-tipo-panel .mode-select-hero-challenge {
    width: 46px !important;
    height: 46px !important;
    margin-bottom: 8px !important;
  }

  #reto-tipo-panel .mode-select-hero-challenge::before {
    width: 34px !important;
    height: 28px !important;
  }

  #reto-tipo-panel .mode-select-hero-challenge::after {
    inset: -12px !important;
  }

  #reto-tipo-panel .reto-dialog-titulo {
    margin-bottom: 6px !important;
    font-size: 20px !important;
    line-height: 1.04 !important;
  }

  #reto-tipo-panel .mode-select-subtitle {
    margin-bottom: 18px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  #reto-tipo-panel .mode-select-subtitle::after {
    bottom: -10px !important;
    width: 64px !important;
  }

  #reto-tipo-botones {
    gap: 9px !important;
    margin: 0 0 12px !important;
  }

  #reto-tipo-botones .btn-tipo-reto {
    grid-template-columns: 44px minmax(0, 1fr) 16px !important;
    min-height: 74px !important;
    padding: 10px 8px !important;
    column-gap: 8px !important;
    border-radius: 10px !important;
  }

  #reto-tipo-botones .btn-tipo-reto .btn-tipo-icono {
    width: 38px !important;
    height: 38px !important;
  }

  #reto-tipo-botones .btn-tipo-reto::after {
    right: 10px !important;
    font-size: 24px !important;
  }

  #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
    font-size: 17px !important;
    line-height: 1.04 !important;
  }

  #reto-tipo-botones .btn-tipo-reto small {
    font-size: 11px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  #reto-tipo-cancelar-btn {
    width: min(100%, 132px) !important;
    min-height: 42px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
  }
}

/* Gameplay responsive final layer: let large phones breathe while preserving
   compact rules for shorter/smaller screens. */
@media (max-width: 767px) {
  html body.gameplay-active #quiz-screen#quiz-screen {
    min-height: 100svh !important;
    padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 12px max(10px, env(safe-area-inset-left)) !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  html body.gameplay-active #game-panel#game-panel {
    width: min(calc(100vw - 20px), 560px) !important;
    max-width: min(calc(100vw - 20px), 560px) !important;
    padding: clamp(13px, 3.7vw, 20px) !important;
    gap: clamp(10px, 2.8vw, 16px) !important;
    border-radius: clamp(18px, 4vw, 24px) !important;
  }

  html body.gameplay-active #reto-mode-badge {
    min-height: clamp(18px, 4.2vw, 25px) !important;
    padding: 4px 10px !important;
    font-size: clamp(10px, 2.6vw, 13px) !important;
    line-height: 1 !important;
  }

  html body.gameplay-active #question-container#question-container {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body.gameplay-active #question#question {
    max-width: 34ch !important;
    margin: 0 auto clamp(9px, 2.6vw, 16px) !important;
    font-size: clamp(17px, 4.45vw, 23px) !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    text-wrap: balance !important;
  }

  html body.gameplay-active #question-image-wrap#question-image-wrap {
    width: min(74vw, 330px) !important;
    max-width: min(74vw, 330px) !important;
    margin: clamp(8px, 2.4vw, 14px) auto 0 !important;
    border-radius: 14px !important;
  }

  html body.gameplay-active #question-image#question-image {
    max-height: min(32svh, 300px) !important;
  }

  html body.gameplay-active #answers-grid#answers-grid {
    width: 100% !important;
    gap: clamp(8px, 2.4vw, 14px) !important;
  }

  html body.gameplay-active .answer-btn.answer-btn {
    min-height: clamp(62px, 16.8vw, 86px) !important;
    padding: clamp(10px, 3vw, 16px) clamp(8px, 2.7vw, 14px) !important;
    border-radius: clamp(12px, 3vw, 16px) !important;
    font-size: clamp(14px, 3.75vw, 19px) !important;
    line-height: 1.14 !important;
    overflow-wrap: anywhere !important;
  }

  html body.gameplay-active #game-panel #controls {
    margin-top: 0 !important;
    width: 100% !important;
  }

  html body.gameplay-active #game-panel #comodin-5050,
  html body.gameplay-active #game-panel #comodin-saltar {
    min-height: clamp(38px, 10.5vw, 50px) !important;
    height: auto !important;
    font-size: clamp(13px, 3.5vw, 17px) !important;
  }

  html body.gameplay-active .ad-banner-wrap {
    width: min(calc((100vw - 56px) * 0.97), 504px) !important;
    max-width: min(calc((100vw - 56px) * 0.97), 504px) !important;
    margin-top: clamp(12px, 3.5vw, 18px) !important;
    border-radius: clamp(13px, 3.6vw, 18px) !important;
  }
}

@media (max-width: 380px), (max-height: 700px) {
  html body.gameplay-active #game-panel#game-panel {
    width: min(calc(100vw - 18px), 430px) !important;
    max-width: min(calc(100vw - 18px), 430px) !important;
    padding: 11px !important;
    gap: 9px !important;
  }

  html body.gameplay-active #question#question {
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.18 !important;
    margin-bottom: 8px !important;
  }

  html body.gameplay-active #question-image-wrap#question-image-wrap {
    width: min(70vw, 250px) !important;
  }

  html body.gameplay-active #question-image#question-image {
    max-height: min(28svh, 220px) !important;
  }

  html body.gameplay-active .answer-btn.answer-btn {
    min-height: 54px !important;
    padding: 8px 7px !important;
    font-size: 12.5px !important;
  }
}

/* Challenge final responsive override. Keep the result card compact and balanced on mobile. */
#reto-resultado-screen.challenge-final-screen #reto-resultado-panel {
  width: min(calc(100vw - 12px), 420px) !important;
  max-width: 420px !important;
  padding: 8px !important;
}

#reto-resultado-screen.challenge-final-screen .reto-result-shell {
  width: 100% !important;
  max-width: 420px !important;
  padding: 12px 10px 9px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

#reto-resultado-screen.challenge-final-screen .reto-result-shell .reto-final-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 10px 0 !important;
}

#reto-resultado-screen.challenge-final-screen .reto-result-shell .reto-final-stat {
  width: auto !important;
  min-width: 0 !important;
  min-height: 86px !important;
  height: 86px !important;
  padding: 9px 8px !important;
  box-sizing: border-box !important;
}

#reto-resultado-screen.challenge-final-screen .reto-result-shell .reto-result-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 10px 0 2px !important;
}

#reto-resultado-screen.challenge-final-screen .reto-result-shell .reto-result-actions button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 8px 6px !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  white-space: normal !important;
}

#reto-resultado-screen.challenge-final-screen .reto-result-shell .reto-result-home {
  grid-column: 1 / -1 !important;
}

@media (max-width: 420px) {
  #reto-resultado-screen.challenge-final-screen {
    padding: 4px 6px !important;
  }

  #reto-resultado-screen.challenge-final-screen .reto-result-shell .reto-final-stat {
    min-height: 82px !important;
    height: 82px !important;
  }
}

/* Final exact layout for the created challenge screen. */
#reto-crear-screen.reto-share-ready {
  padding: clamp(8px, 2.2svh, 22px) 12px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
  background: rgba(0, 5, 14, 0.82) !important;
}

#reto-crear-screen.reto-share-ready #reto-crear-panel {
  width: min(calc(100vw - 24px), 430px) !important;
  max-width: 430px !important;
  padding: clamp(18px, 3svh, 28px) 20px clamp(16px, 2.6svh, 26px) !important;
  border-radius: 21px !important;
  border: 2px solid #008cff !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 112, 230, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(1, 35, 77, 0.96), rgba(0, 10, 28, 0.99)) !important;
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.46), 0 0 32px rgba(0, 140, 255, 0.18) !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

#reto-crear-screen.reto-share-ready .reto-dialog-icono {
  width: clamp(58px, 9svh, 74px) !important;
  height: clamp(58px, 9svh, 74px) !important;
  margin: 0 auto clamp(10px, 2svh, 18px) !important;
  border-width: 4px !important;
}

#reto-crear-screen.reto-share-ready .reto-dialog-titulo {
  width: 100% !important;
  margin: 0 0 clamp(5px, 1svh, 8px) !important;
  font-size: clamp(32px, 8.2vw, 42px) !important;
  line-height: 0.94 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

#reto-crear-screen.reto-share-ready #reto-crear-estado {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 0 0 clamp(12px, 2svh, 18px) !important;
}

#reto-crear-screen.reto-share-ready .reto-created-waiting {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  color: rgba(232, 241, 255, 0.92) !important;
  font-size: clamp(16px, 4vw, 20px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#reto-crear-screen.reto-share-ready .reto-created-expiry {
  flex: 0 0 auto !important;
  min-height: clamp(32px, 5svh, 40px) !important;
  padding: 0 clamp(12px, 3.5vw, 20px) !important;
  border-radius: 999px !important;
  font-size: clamp(14px, 3.6vw, 17px) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  background: linear-gradient(180deg, rgba(11, 83, 163, 0.92), rgba(4, 55, 125, 0.96)) !important;
}

#reto-crear-screen.reto-share-ready #reto-codigo-generado {
  margin: 0 0 clamp(14px, 2.2svh, 20px) !important;
  padding: clamp(13px, 2.2svh, 18px) 16px clamp(13px, 2.2svh, 18px) !important;
  border-radius: 15px !important;
  border: 1.5px solid rgba(0, 132, 255, 0.74) !important;
  background: linear-gradient(180deg, rgba(4, 47, 98, 0.8), rgba(0, 20, 50, 0.92)) !important;
}

#reto-crear-screen.reto-share-ready #reto-created-mode-summary {
  grid-template-columns: clamp(48px, 12vw, 64px) minmax(0, 1fr) !important;
  gap: clamp(10px, 3vw, 14px) !important;
  margin: 0 0 clamp(11px, 2svh, 16px) !important;
}

#reto-crear-screen.reto-share-ready .reto-created-mode-icon {
  width: clamp(46px, 11vw, 54px) !important;
  height: clamp(46px, 11vw, 54px) !important;
}

#reto-crear-screen.reto-share-ready .reto-created-mode-copy strong {
  font-size: clamp(20px, 5vw, 24px) !important;
  line-height: 1.05 !important;
}

#reto-crear-screen.reto-share-ready .reto-created-mode-copy span {
  margin-top: 4px !important;
  font-size: clamp(13px, 3.7vw, 16px) !important;
  line-height: 1.05 !important;
}

#reto-crear-screen.reto-share-ready .reto-codigo-label {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 0 -1px !important;
  font-size: clamp(13px, 3.8vw, 16px) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
}

#reto-crear-screen.reto-share-ready .reto-codigo-valor {
  min-height: clamp(62px, 9svh, 78px) !important;
  padding: 10px clamp(54px, 13vw, 62px) 10px 10px !important;
  border-radius: 15px !important;
  font-size: clamp(35px, 9.8vw, 52px) !important;
  letter-spacing: clamp(1px, 0.8vw, 5px) !important;
  justify-content: center !important;
}

#reto-crear-screen.reto-share-ready .reto-codigo-valor::after {
  right: 10px !important;
  width: clamp(38px, 10vw, 46px) !important;
  height: clamp(38px, 10vw, 46px) !important;
}

#reto-crear-screen.reto-share-ready #reto-play-now-btn,
#reto-crear-screen.reto-share-ready #reto-whatsapp-btn,
#reto-crear-screen.reto-share-ready #reto-copiar-enlace-btn {
  margin: 0 0 clamp(9px, 1.7svh, 13px) !important;
  border-radius: 12px !important;
}

#reto-crear-screen.reto-share-ready #reto-play-now-btn {
  min-height: clamp(66px, 11svh, 94px) !important;
  padding: clamp(9px, 2svh, 14px) 16px !important;
  font-size: clamp(24px, 6.4vw, 34px) !important;
}

#reto-crear-screen.reto-share-ready #reto-whatsapp-btn {
  min-height: clamp(56px, 9svh, 78px) !important;
  padding: clamp(8px, 1.8svh, 12px) 16px !important;
  font-size: clamp(20px, 5.2vw, 27px) !important;
}

#reto-crear-screen.reto-share-ready #reto-copiar-enlace-btn {
  min-height: clamp(48px, 7svh, 58px) !important;
  padding: 10px 16px !important;
  font-size: clamp(19px, 4.8vw, 25px) !important;
}

#reto-crear-screen.reto-share-ready #reto-created-home-btn {
  min-height: 34px !important;
  margin: clamp(6px, 1.4svh, 12px) 0 0 !important;
  padding: 0 !important;
  font-size: clamp(18px, 4.6vw, 22px) !important;
}

@media (max-width: 390px) {
  #reto-crear-screen.reto-share-ready #reto-crear-panel {
    padding: 20px 18px 18px !important;
  }

  #reto-crear-screen.reto-share-ready .reto-dialog-titulo {
    font-size: clamp(34px, 10vw, 40px) !important;
  }

  #reto-crear-screen.reto-share-ready .reto-created-expiry {
    padding: 0 14px !important;
    font-size: 15px !important;
  }

  #reto-crear-screen.reto-share-ready .reto-codigo-valor {
    font-size: clamp(34px, 10vw, 46px) !important;
    letter-spacing: 1px !important;
  }
}

@media (max-height: 760px) {
  #reto-crear-screen.reto-share-ready {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #reto-crear-screen.reto-share-ready #reto-crear-panel {
    padding-top: 16px !important;
    padding-bottom: 14px !important;
  }

  #reto-crear-screen.reto-share-ready .reto-dialog-icono {
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 8px !important;
  }

  #reto-crear-screen.reto-share-ready .reto-dialog-icono::before {
    font-size: 36px !important;
  }

  #reto-crear-screen.reto-share-ready .reto-dialog-titulo {
    font-size: clamp(29px, 8vw, 36px) !important;
  }
}

/* Created challenge final mobile polish: closer to the reference while still fitting. */
body:has(#reto-crear-screen.reto-share-ready) .audio-toggle-btn {
  top: 14px !important;
  right: 14px !important;
  width: 38px !important;
  height: 38px !important;
  font-size: 18px !important;
  transform: none !important;
}

#reto-crear-screen.reto-share-ready #reto-crear-panel {
  width: min(calc(100vw - 28px), 430px) !important;
  padding: clamp(22px, 3.2svh, 30px) clamp(20px, 5vw, 26px) clamp(20px, 3svh, 28px) !important;
}

#reto-crear-screen.reto-share-ready .reto-dialog-icono {
  width: clamp(66px, 10.5svh, 78px) !important;
  height: clamp(66px, 10.5svh, 78px) !important;
  margin-bottom: clamp(13px, 2.2svh, 20px) !important;
}

#reto-crear-screen.reto-share-ready .reto-dialog-icono::before {
  font-size: clamp(42px, 7svh, 50px) !important;
}

#reto-crear-screen.reto-share-ready .reto-dialog-titulo {
  margin-bottom: clamp(8px, 1.3svh, 12px) !important;
  font-size: clamp(34px, 9vw, 48px) !important;
  line-height: 0.95 !important;
}

#reto-crear-screen.reto-share-ready #reto-crear-estado {
  margin-bottom: clamp(16px, 2.4svh, 24px) !important;
}

#reto-crear-screen.reto-share-ready #reto-codigo-generado {
  padding: clamp(17px, 2.5svh, 22px) clamp(16px, 4.2vw, 20px) clamp(18px, 2.6svh, 22px) !important;
  margin-bottom: clamp(18px, 2.8svh, 26px) !important;
}

#reto-crear-screen.reto-share-ready .reto-created-mode-copy strong {
  font-size: clamp(22px, 5.8vw, 28px) !important;
}

#reto-crear-screen.reto-share-ready .reto-created-mode-copy span {
  font-size: clamp(14px, 3.9vw, 17px) !important;
}

#reto-crear-screen.reto-share-ready .reto-codigo-valor {
  min-height: clamp(68px, 10svh, 84px) !important;
  padding-right: clamp(54px, 13vw, 66px) !important;
  font-size: clamp(41px, 11vw, 60px) !important;
  letter-spacing: clamp(2px, 0.9vw, 6px) !important;
}

#reto-crear-screen.reto-share-ready #reto-play-now-btn {
  min-height: clamp(78px, 12svh, 102px) !important;
  font-size: clamp(27px, 7vw, 38px) !important;
}

#reto-crear-screen.reto-share-ready #reto-whatsapp-btn {
  min-height: clamp(64px, 9.8svh, 84px) !important;
  font-size: clamp(22px, 5.7vw, 30px) !important;
}

#reto-crear-screen.reto-share-ready #reto-copiar-enlace-btn {
  min-height: clamp(54px, 7.6svh, 64px) !important;
  font-size: clamp(20px, 5.1vw, 27px) !important;
}

@media (max-height: 720px) {
  #reto-crear-screen.reto-share-ready #reto-crear-panel {
    padding-top: 18px !important;
    padding-bottom: 16px !important;
  }

  #reto-crear-screen.reto-share-ready .reto-dialog-icono {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 9px !important;
  }

  #reto-crear-screen.reto-share-ready .reto-dialog-titulo {
    font-size: clamp(31px, 8.4vw, 38px) !important;
  }

  #reto-crear-screen.reto-share-ready #reto-crear-estado {
    margin-bottom: 13px !important;
  }

  #reto-crear-screen.reto-share-ready #reto-codigo-generado {
    margin-bottom: 14px !important;
  }

  #reto-crear-screen.reto-share-ready #reto-play-now-btn {
    min-height: 70px !important;
  }

  #reto-crear-screen.reto-share-ready #reto-whatsapp-btn {
    min-height: 58px !important;
  }
}

/* Robust created challenge state, driven by a body class for mobile browsers. */
body.reto-created-active #reto-crear-screen.reto-share-ready {
  padding: 10px 12px !important;
  background: rgba(0, 5, 14, 0.88) !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready #reto-crear-panel {
  width: min(calc(100vw - 24px), 430px) !important;
  max-width: 430px !important;
  min-height: auto !important;
  padding: clamp(20px, 3svh, 30px) clamp(20px, 5vw, 26px) clamp(18px, 2.7svh, 28px) !important;
  border-radius: 22px !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-dialog-icono {
  width: clamp(68px, 10svh, 82px) !important;
  height: clamp(68px, 10svh, 82px) !important;
  margin-bottom: clamp(12px, 2svh, 20px) !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-dialog-titulo {
  font-size: clamp(38px, 9.6vw, 50px) !important;
  line-height: 0.93 !important;
  margin-bottom: clamp(8px, 1.4svh, 13px) !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready #reto-crear-estado {
  margin-bottom: clamp(16px, 2.3svh, 24px) !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready #reto-codigo-generado {
  padding: clamp(18px, 2.5svh, 22px) clamp(16px, 4.2vw, 20px) !important;
  margin-bottom: clamp(18px, 2.6svh, 26px) !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-codigo-valor {
  min-height: clamp(72px, 10svh, 88px) !important;
  font-size: clamp(43px, 11.4vw, 62px) !important;
  letter-spacing: clamp(1px, 0.7vw, 5px) !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready #reto-play-now-btn {
  min-height: clamp(82px, 12svh, 106px) !important;
  font-size: clamp(29px, 7.4vw, 40px) !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready #reto-whatsapp-btn {
  min-height: clamp(68px, 9.5svh, 86px) !important;
  font-size: clamp(23px, 5.8vw, 31px) !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready #reto-copiar-enlace-btn {
  min-height: clamp(56px, 7.5svh, 66px) !important;
  font-size: clamp(21px, 5.2vw, 28px) !important;
}

@media (max-height: 720px) {
  body.reto-created-active #reto-crear-screen.reto-share-ready #reto-crear-panel {
    padding-top: 16px !important;
    padding-bottom: 14px !important;
  }

  body.reto-created-active #reto-crear-screen.reto-share-ready .reto-dialog-icono {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 8px !important;
  }

  body.reto-created-active #reto-crear-screen.reto-share-ready .reto-dialog-titulo {
    font-size: clamp(32px, 8.8vw, 39px) !important;
  }

  body.reto-created-active #reto-crear-screen.reto-share-ready #reto-play-now-btn {
    min-height: 72px !important;
  }

  body.reto-created-active #reto-crear-screen.reto-share-ready #reto-whatsapp-btn {
    min-height: 60px !important;
  }
}

/* Compact, usable created challenge layout for real mobile screens. */
body.reto-created-active #reto-crear-screen.reto-share-ready {
  padding: 10px 0 !important;
  align-items: flex-start !important;
  overflow-y: auto !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready #reto-crear-panel {
  width: min(94vw, 420px) !important;
  max-width: 420px !important;
  padding: 22px 18px !important;
  box-sizing: border-box !important;
  border-radius: 20px !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-dialog-icono {
  width: 58px !important;
  height: 58px !important;
  margin: 0 auto 12px !important;
  border-width: 3px !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-dialog-icono::before {
  font-size: 36px !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-dialog-titulo {
  max-width: 100% !important;
  margin: 0 auto 10px !important;
  font-size: clamp(28px, 7.4vw, 36px) !important;
  line-height: 1 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
}

body.reto-created-active #reto-crear-screen.reto-share-ready #reto-crear-estado {
  gap: 7px !important;
  margin: 0 0 14px !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-created-waiting {
  font-size: clamp(14px, 3.8vw, 17px) !important;
  font-weight: 800 !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-created-expiry {
  min-height: 32px !important;
  padding: 0 13px !important;
  font-size: clamp(13px, 3.5vw, 15px) !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready #reto-codigo-generado {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 14px !important;
  padding: 14px 13px !important;
  border-radius: 15px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready #reto-created-mode-summary {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 11px !important;
  margin: 0 0 12px !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-created-mode-icon {
  width: 44px !important;
  height: 44px !important;
  font-size: 24px !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-created-mode-copy strong {
  font-size: clamp(18px, 5vw, 22px) !important;
  line-height: 1.05 !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-created-mode-copy span {
  font-size: clamp(12px, 3.5vw, 14px) !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-codigo-label {
  margin: 0 0 6px !important;
  font-size: clamp(12px, 3.3vw, 14px) !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-codigo-valor {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 62px !important;
  padding: 9px 50px 9px 10px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  font-size: clamp(34px, 10vw, 48px) !important;
  letter-spacing: clamp(2px, 1.6vw, 8px) !important;
  line-height: 1 !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready .reto-codigo-valor::after {
  right: 8px !important;
  width: 38px !important;
  height: 38px !important;
  font-size: 22px !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready #reto-play-now-btn,
body.reto-created-active #reto-crear-screen.reto-share-ready #reto-whatsapp-btn,
body.reto-created-active #reto-crear-screen.reto-share-ready #reto-copiar-enlace-btn {
  min-height: 52px !important;
  margin: 0 0 10px !important;
  padding: 9px 12px !important;
  border-radius: 11px !important;
  font-size: clamp(18px, 4.8vw, 20px) !important;
  line-height: 1.08 !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready #reto-play-now-btn::before,
body.reto-created-active #reto-crear-screen.reto-share-ready #reto-whatsapp-btn::before,
body.reto-created-active #reto-crear-screen.reto-share-ready #reto-copiar-enlace-btn::before {
  margin-right: 10px !important;
  font-size: 20px !important;
}

body.reto-created-active #reto-crear-screen.reto-share-ready #reto-created-home-btn {
  min-height: 30px !important;
  margin: 8px 0 0 !important;
  font-size: 18px !important;
}

@media (max-width: 370px) {
  body.reto-created-active #reto-crear-screen.reto-share-ready #reto-crear-panel {
    width: min(96vw, 420px) !important;
    padding: 18px 14px !important;
  }

  body.reto-created-active #reto-crear-screen.reto-share-ready .reto-codigo-valor {
    padding-right: 46px !important;
    font-size: clamp(32px, 9.4vw, 42px) !important;
    letter-spacing: 2px !important;
  }

  body.reto-created-active #reto-crear-screen.reto-share-ready .reto-codigo-valor::after {
    width: 34px !important;
    height: 34px !important;
  }
}

/* Modern challenge mode selection screen. */
#reto-crear-screen:not(.reto-share-ready) {
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 3svh, 28px) 12px !important;
  overflow-y: auto !important;
  background: rgba(0, 5, 14, 0.78) !important;
}

#reto-crear-screen:not(.reto-share-ready) #reto-crear-panel {
  width: min(94vw, 520px) !important;
  max-width: 520px !important;
  max-height: calc(100svh - 24px) !important;
  padding: clamp(20px, 3.4svh, 34px) clamp(16px, 4vw, 28px) !important;
  border-radius: 22px !important;
  border: 1.5px solid rgba(0, 132, 255, 0.62) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 132, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(1, 28, 62, 0.97), rgba(0, 8, 22, 0.99)) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  text-align: center !important;
}

#reto-crear-screen:not(.reto-share-ready) .reto-dialog-icono {
  display: grid !important;
  place-items: center;
  width: clamp(54px, 9svh, 78px) !important;
  height: clamp(54px, 9svh, 78px) !important;
  margin: 0 auto clamp(10px, 1.8svh, 16px) !important;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.26), transparent 24%),
    linear-gradient(180deg, #178dff, #064aaf);
  color: transparent !important;
  font-size: 0 !important;
  box-shadow: 0 0 28px rgba(0, 132, 255, 0.28);
}

#reto-crear-screen:not(.reto-share-ready) .reto-dialog-icono::before {
  content: "🎯";
  color: #ffffff;
  font-size: clamp(30px, 5.8svh, 46px);
}

#reto-crear-screen:not(.reto-share-ready) .reto-dialog-titulo {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(30px, 7.2vw, 50px) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  text-transform: uppercase;
}

#reto-crear-screen:not(.reto-share-ready) #reto-mode-subtitle {
  margin: 8px 0 clamp(14px, 2.2svh, 22px) !important;
  color: rgba(225, 238, 255, 0.78) !important;
  font-size: clamp(15px, 4vw, 22px) !important;
  line-height: 1.15 !important;
  font-weight: 750 !important;
}

#reto-crear-screen:not(.reto-share-ready) #reto-crear-estado {
  min-height: 0 !important;
  margin: 0 !important;
}

#reto-crear-screen:not(.reto-share-ready) #reto-mode-selector {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(9px, 1.6svh, 14px) !important;
  width: 100% !important;
  margin: 0 0 clamp(14px, 2.2svh, 22px) !important;
}

#reto-crear-screen:not(.reto-share-ready) .reto-mode-option {
  position: relative !important;
  min-height: clamp(64px, 10svh, 92px) !important;
  width: 100% !important;
  padding: clamp(11px, 2svh, 18px) 64px clamp(11px, 2svh, 18px) clamp(76px, 15vw, 108px) !important;
  border-radius: 15px !important;
  border: 1.5px solid rgba(84, 121, 164, 0.48) !important;
  background:
    linear-gradient(180deg, rgba(3, 26, 55, 0.7), rgba(0, 10, 26, 0.86)) !important;
  opacity: 0.78 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transform: none !important;
  box-sizing: border-box !important;
}

#reto-crear-screen:not(.reto-share-ready) .reto-mode-option::before {
  left: clamp(16px, 4.5vw, 26px) !important;
  width: clamp(44px, 10vw, 68px) !important;
  height: clamp(44px, 10vw, 68px) !important;
  border: 2px solid rgba(76, 144, 255, 0.42);
  background: rgba(0, 30, 64, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#reto-crear-screen:not(.reto-share-ready) .reto-mode-option-title {
  font-size: clamp(20px, 5.1vw, 30px) !important;
  line-height: 1.08 !important;
  font-weight: 1000 !important;
}

#reto-crear-screen:not(.reto-share-ready) .reto-mode-option-meta {
  margin-top: 2px;
  color: rgba(218, 232, 255, 0.78) !important;
  font-size: clamp(13px, 3.7vw, 19px) !important;
  line-height: 1.05 !important;
  font-weight: 750 !important;
}

#reto-crear-screen:not(.reto-share-ready) .reto-mode-option-selected {
  display: none;
  margin-top: 7px;
  width: max-content;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(18, 167, 72, 0.86);
  color: #ffffff;
  font-size: clamp(11px, 3vw, 14px);
  line-height: 1;
  font-weight: 1000;
}

#reto-crear-screen:not(.reto-share-ready) .reto-mode-option::after {
  content: "";
  position: absolute;
  right: clamp(18px, 4.6vw, 28px);
  top: 50%;
  width: clamp(24px, 7vw, 36px);
  height: clamp(24px, 7vw, 36px);
  border-radius: 999px;
  border: 2px solid rgba(217, 229, 245, 0.55);
  transform: translateY(-50%);
  box-sizing: border-box;
}

#reto-crear-screen:not(.reto-share-ready) .reto-mode-option.is-active,
#reto-crear-screen:not(.reto-share-ready) .reto-mode-option[aria-pressed="true"] {
  border: 2px solid #20c8ff !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(0, 166, 255, 0.28), transparent 30%),
    linear-gradient(180deg, rgba(7, 69, 132, 0.86), rgba(0, 28, 72, 0.94)) !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 2px rgba(32, 200, 255, 0.08),
    0 0 24px rgba(32, 200, 255, 0.25) !important;
}

#reto-crear-screen:not(.reto-share-ready) .reto-mode-option.is-active::after,
#reto-crear-screen:not(.reto-share-ready) .reto-mode-option[aria-pressed="true"]::after {
  content: "✓";
  display: grid;
  place-items: center;
  border: none;
  background: linear-gradient(180deg, #2ee181, #0a9d49);
  color: #ffffff;
  font-size: clamp(18px, 5vw, 27px);
  font-weight: 1000;
  box-shadow: 0 0 18px rgba(37, 222, 126, 0.28);
}

#reto-crear-screen:not(.reto-share-ready) .reto-mode-option.is-active .reto-mode-option-selected,
#reto-crear-screen:not(.reto-share-ready) .reto-mode-option[aria-pressed="true"] .reto-mode-option-selected {
  display: inline-flex !important;
}

#reto-crear-screen:not(.reto-share-ready) #reto-crear-botones {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
}

#reto-crear-screen:not(.reto-share-ready) #reto-crear-confirmar-btn {
  width: 100% !important;
  min-height: clamp(56px, 8.8svh, 72px) !important;
  max-height: 72px !important;
  border-radius: 15px !important;
  border: 1.5px solid rgba(90, 205, 255, 0.72) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(180deg, #0a9bff, #005ed8) !important;
  color: #ffffff !important;
  font-size: clamp(21px, 5.4vw, 34px) !important;
  font-weight: 1000 !important;
  text-transform: uppercase;
  box-shadow: 0 13px 30px rgba(0, 112, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

#reto-crear-screen:not(.reto-share-ready) #reto-crear-confirmar-btn::before {
  content: "🏆 ";
}

#reto-crear-screen:not(.reto-share-ready) #reto-crear-cancelar-btn {
  width: 100% !important;
  min-height: clamp(48px, 7.5svh, 60px) !important;
  border-radius: 13px !important;
  border: 1px solid rgba(134, 168, 205, 0.42) !important;
  background: linear-gradient(180deg, rgba(25, 45, 68, 0.92), rgba(8, 20, 36, 0.96)) !important;
  color: rgba(236, 244, 255, 0.92) !important;
  font-size: clamp(18px, 4.6vw, 26px) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

@media (max-height: 700px) {
  #reto-crear-screen:not(.reto-share-ready) #reto-crear-panel {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  #reto-crear-screen:not(.reto-share-ready) .reto-dialog-icono {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 8px !important;
  }

  #reto-crear-screen:not(.reto-share-ready) .reto-dialog-titulo {
    font-size: clamp(26px, 7vw, 38px) !important;
  }

  #reto-crear-screen:not(.reto-share-ready) #reto-mode-selector {
    gap: 7px !important;
    margin-bottom: 10px !important;
  }

  #reto-crear-screen:not(.reto-share-ready) .reto-mode-option {
    min-height: 58px !important;
  }
}

/* Exact visual replica layer for the friends challenge selector.
   Scoped only to #reto-tipo-screen and never forces the dialog display state. */
#reto-tipo-screen {
  min-height: 100svh !important;
  padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 50% 9%, rgba(15, 124, 255, 0.18), transparent 34%),
    rgba(0, 6, 16, 0.92) !important;
}

#reto-tipo-panel {
  width: min(94vw, 520px) !important;
  max-width: 520px !important;
  max-height: calc(100svh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))) !important;
  padding: clamp(28px, 5vw, 46px) clamp(20px, 4.8vw, 36px) !important;
  border: 2px solid #0878e8 !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 4%, rgba(20, 124, 255, 0.24), transparent 32%),
    linear-gradient(180deg, rgba(3, 32, 66, 0.98), rgba(0, 8, 22, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 58px rgba(0, 0, 0, 0.5),
    0 0 34px rgba(0, 120, 255, 0.18) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#reto-tipo-panel .mode-select-hero-challenge {
  width: clamp(92px, 18vw, 132px) !important;
  height: clamp(92px, 18vw, 132px) !important;
  margin: 0 auto clamp(18px, 3.4vw, 28px) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(40, 148, 255, 0.24), transparent 66%),
    linear-gradient(180deg, rgba(8, 36, 72, 0.84), rgba(0, 15, 36, 0.94)) !important;
  box-shadow:
    0 0 0 2px rgba(35, 150, 255, 0.58),
    0 0 34px rgba(30, 155, 255, 0.42) !important;
}

#reto-tipo-panel .mode-select-hero-challenge::before {
  content: "⚔" !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  background: none !important;
  color: #ffffff !important;
  font-size: clamp(58px, 12vw, 92px) !important;
  line-height: 1 !important;
  text-shadow:
    0 0 22px rgba(57, 174, 255, 0.7),
    0 4px 12px rgba(0, 0, 0, 0.55) !important;
  filter: none !important;
}

#reto-tipo-panel .mode-select-hero-challenge::after {
  content: "" !important;
  inset: -16px !important;
  background:
    radial-gradient(circle at 9% 33%, #1bc5ff 0 2px, transparent 2.5px),
    radial-gradient(circle at 91% 25%, #ff4d62 0 2px, transparent 2.5px),
    radial-gradient(circle at 82% 78%, rgba(25, 191, 255, 0.75) 0 2px, transparent 2.5px),
    radial-gradient(circle at 20% 88%, rgba(255, 77, 98, 0.7) 0 2px, transparent 2.5px) !important;
}

#reto-tipo-panel .reto-dialog-titulo {
  max-width: 440px !important;
  margin: 0 auto 12px !important;
  color: #ffffff !important;
  font-size: clamp(38px, 8.8vw, 64px) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.5) !important;
}

#reto-tipo-panel .mode-select-subtitle {
  margin: 0 0 clamp(42px, 7vw, 60px) !important;
  color: rgba(226, 239, 255, 0.82) !important;
  font-size: clamp(20px, 4.5vw, 27px) !important;
  font-weight: 600 !important;
  text-align: center !important;
}

#reto-tipo-panel .mode-select-subtitle::after {
  bottom: calc(-1 * clamp(20px, 3.8vw, 28px)) !important;
  width: min(122px, 34vw) !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(59, 180, 255, 0.9), transparent) !important;
}

#reto-tipo-botones {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(16px, 3.3vw, 24px) !important;
  margin: 0 0 clamp(20px, 4vw, 30px) !important;
}

#reto-tipo-botones .btn-tipo-reto {
  position: relative !important;
  display: grid !important;
  grid-template-columns: clamp(86px, 18vw, 124px) minmax(0, 1fr) clamp(24px, 5vw, 36px) !important;
  align-items: center !important;
  gap: clamp(18px, 3.5vw, 26px) !important;
  min-height: clamp(128px, 24vw, 170px) !important;
  padding: clamp(18px, 4vw, 28px) clamp(16px, 4vw, 28px) !important;
  border-radius: 16px !important;
  border: 2px solid rgba(101, 151, 205, 0.62) !important;
  background:
    radial-gradient(circle at 16% 50%, rgba(35, 125, 230, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(2, 29, 59, 0.94), rgba(0, 14, 32, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.24) !important;
  color: #ffffff !important;
  text-align: left !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#reto-tipo-botones .btn-tipo-reto:first-child {
  border-color: #20d2ff !important;
  background:
    radial-gradient(circle at 16% 50%, rgba(33, 196, 255, 0.34), transparent 30%),
    linear-gradient(180deg, rgba(5, 58, 108, 0.99), rgba(1, 28, 61, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 28px rgba(0, 180, 255, 0.24),
    0 16px 34px rgba(0, 0, 0, 0.3) !important;
}

#reto-tipo-botones .btn-tipo-reto::before {
  content: none !important;
  display: none !important;
}

#reto-tipo-botones .btn-tipo-reto::after {
  content: ">" !important;
  position: static !important;
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  transform: none !important;
  color: rgba(190, 224, 255, 0.78) !important;
  font-size: clamp(42px, 8vw, 58px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  background: none !important;
  box-shadow: none !important;
}

#reto-tipo-botones .btn-tipo-reto:first-child::after {
  color: #2ea9ff !important;
}

#reto-tipo-botones .btn-tipo-icono {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: static !important;
  justify-self: center !important;
  width: clamp(82px, 16.5vw, 116px) !important;
  height: clamp(82px, 16.5vw, 116px) !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  color: transparent !important;
  font-size: 0 !important;
  transform: none !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.46), transparent 18%),
    linear-gradient(180deg, #31b8ff, #0056cc) !important;
  box-shadow:
    0 0 0 2px rgba(132, 187, 255, 0.35),
    0 0 24px rgba(27, 148, 255, 0.42) !important;
}

#reto-tipo-1v1-btn .btn-tipo-icono::before {
  content: "VS" !important;
  color: #ffffff !important;
  font-size: clamp(22px, 5vw, 36px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 10px rgba(0, 23, 72, 0.55) !important;
}

#reto-tipo-grupo-btn .btn-tipo-icono::before {
  content: "" !important;
  width: clamp(42px, 8vw, 56px) !important;
  height: clamp(34px, 6.7vw, 44px) !important;
  display: block !important;
  background:
    radial-gradient(circle at 50% 19%, #f4fbff 0 6px, transparent 6.5px),
    radial-gradient(circle at 25% 35%, #d6ecff 0 6px, transparent 6.5px),
    radial-gradient(circle at 75% 35%, #d6ecff 0 6px, transparent 6.5px),
    radial-gradient(ellipse at 50% 82%, #f0f8ff 0 12px, transparent 12.5px),
    radial-gradient(ellipse at 25% 90%, #d8eeff 0 9px, transparent 9.5px),
    radial-gradient(ellipse at 75% 90%, #d8eeff 0 9px, transparent 9.5px) !important;
}

#reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
  grid-column: 2 !important;
  justify-self: start !important;
  min-width: 0 !important;
  color: #ffffff !important;
  font-size: clamp(32px, 7vw, 48px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

#reto-tipo-botones .btn-tipo-reto small {
  grid-column: 2 !important;
  justify-self: start !important;
  color: #31aaff !important;
  font-size: clamp(17px, 4.2vw, 25px) !important;
  font-weight: 760 !important;
  line-height: 1.28 !important;
  text-align: left !important;
  white-space: pre-line !important;
}

#reto-tipo-cancelar-btn {
  width: min(100%, 360px) !important;
  min-height: clamp(60px, 12vw, 82px) !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 15px !important;
  border: 1px solid rgba(126, 180, 229, 0.55) !important;
  background: linear-gradient(180deg, rgba(25, 55, 87, 0.9), rgba(7, 25, 49, 0.96)) !important;
  color: #ffffff !important;
  font-size: clamp(22px, 5.3vw, 34px) !important;
  font-weight: 950 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 22px rgba(0, 0, 0, 0.28) !important;
}

#reto-tipo-cancelar-btn::before {
  content: "" !important;
  width: clamp(28px, 6vw, 38px) !important;
  height: clamp(22px, 5vw, 30px) !important;
  margin-right: 14px !important;
  border: 3px solid rgba(230, 241, 255, 0.9) !important;
  border-top: none !important;
  border-radius: 0 0 5px 5px !important;
  transform: translateY(4px) !important;
}

@media (max-width: 430px), (max-height: 760px) {
  #reto-tipo-screen {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
  }

  #reto-tipo-panel {
    width: min(94vw, 390px) !important;
    padding: 18px 14px 16px !important;
    max-height: calc(100svh - 16px) !important;
  }

  #reto-tipo-panel .mode-select-hero-challenge {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 12px !important;
  }

  #reto-tipo-panel .mode-select-hero-challenge::before {
    font-size: 50px !important;
  }

  #reto-tipo-panel .reto-dialog-titulo {
    font-size: clamp(31px, 8.5vw, 42px) !important;
    margin-bottom: 8px !important;
  }

  #reto-tipo-panel .mode-select-subtitle {
    margin-bottom: 28px !important;
    font-size: 16px !important;
  }

  #reto-tipo-botones {
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  #reto-tipo-botones .btn-tipo-reto {
    grid-template-columns: 74px minmax(0, 1fr) 22px !important;
    min-height: 104px !important;
    padding: 14px 12px !important;
    gap: 12px !important;
  }

  #reto-tipo-botones .btn-tipo-icono {
    width: 66px !important;
    height: 66px !important;
  }

  #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
    font-size: 27px !important;
  }

  #reto-tipo-botones .btn-tipo-reto small {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  #reto-tipo-cancelar-btn {
    width: min(100%, 260px) !important;
    min-height: 54px !important;
    font-size: 18px !important;
  }
}

/* Final hard reset for #reto-tipo-screen visual fidelity. */
#reto-tipo-screen,
#reto-tipo-screen * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

#reto-tipo-screen *::selection {
  background: transparent !important;
  color: inherit !important;
}

#reto-tipo-screen #reto-tipo-panel {
  width: min(94vw, 520px) !important;
  max-width: 520px !important;
  padding: clamp(28px, 5vw, 44px) clamp(20px, 4.8vw, 36px) !important;
}

#reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge::before {
  content: "⚔" !important;
  background: none !important;
  color: #ffffff !important;
}

#reto-tipo-screen #reto-tipo-botones .btn-tipo-reto {
  display: grid !important;
  grid-template-columns: clamp(82px, 17vw, 116px) minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: clamp(18px, 3.4vw, 24px) !important;
  min-height: clamp(118px, 22vw, 160px) !important;
  padding: clamp(17px, 3.8vw, 26px) clamp(18px, 4vw, 28px) !important;
}

#reto-tipo-screen #reto-tipo-botones .btn-tipo-reto::before {
  content: none !important;
  display: none !important;
}

#reto-tipo-screen #reto-tipo-botones .btn-tipo-reto::after {
  grid-column: 3 !important;
  justify-self: center !important;
  min-width: 0 !important;
}

#reto-tipo-screen #reto-tipo-botones .btn-tipo-icono {
  grid-column: 1 !important;
  justify-self: center !important;
  width: clamp(78px, 16vw, 108px) !important;
  height: clamp(78px, 16vw, 108px) !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#reto-tipo-screen #reto-tipo-botones .btn-tipo-icono::after {
  content: none !important;
  display: none !important;
}

#reto-tipo-screen #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
  grid-column: 2 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  color: #ffffff !important;
  font-size: clamp(30px, 6.4vw, 46px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

#reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small {
  grid-column: 2 !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  margin-top: 8px !important;
  color: #31aaff !important;
  font-size: clamp(17px, 4vw, 24px) !important;
  line-height: 1.25 !important;
  font-weight: 760 !important;
  text-align: left !important;
  white-space: pre-line !important;
  overflow: visible !important;
}

#reto-tipo-screen #reto-tipo-cancelar-btn {
  width: 100% !important;
  min-height: clamp(64px, 12vw, 84px) !important;
  display: inline-flex !important;
  gap: 16px !important;
  font-size: clamp(24px, 5.5vw, 36px) !important;
}

@media (max-width: 430px), (max-height: 760px) {
  #reto-tipo-screen #reto-tipo-panel {
    width: min(94vw, 390px) !important;
    padding: 18px 14px 16px !important;
  }

  #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge {
    width: 78px !important;
    height: 78px !important;
    margin-bottom: 12px !important;
  }

  #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge::before {
    font-size: 52px !important;
  }

  #reto-tipo-screen #reto-tipo-panel .reto-dialog-titulo {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.04 !important;
    margin-bottom: 10px !important;
  }

  #reto-tipo-screen #reto-tipo-panel .mode-select-subtitle {
    margin-bottom: 30px !important;
    font-size: 16px !important;
  }

  #reto-tipo-screen #reto-tipo-botones {
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto {
    grid-template-columns: 76px minmax(0, 1fr) 26px !important;
    gap: 12px !important;
    min-height: 112px !important;
    padding: 14px 12px !important;
  }

  #reto-tipo-screen #reto-tipo-botones .btn-tipo-icono {
    width: 68px !important;
    height: 68px !important;
  }

  #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
    font-size: 27px !important;
  }

  #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small {
    margin-top: 7px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto::after {
    font-size: 32px !important;
  }

  #reto-tipo-screen #reto-tipo-cancelar-btn {
    min-height: 58px !important;
    font-size: 20px !important;
  }
}

/* FINAL ONLY: visual copy for the friends challenge type screen.
   Scoped to #reto-tipo-screen so the main menu and challenge logic stay untouched. */
html body #reto-tipo-screen {
  align-items: center !important;
  justify-content: center !important;
  padding: max(14px, env(safe-area-inset-top)) 10px max(14px, env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(24, 126, 255, 0.16), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(0, 128, 255, 0.1), transparent 34%),
    #020a14 !important;
}

html body #reto-tipo-screen,
html body #reto-tipo-screen * {
  box-sizing: border-box !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

html body #reto-tipo-screen *::selection {
  background: transparent !important;
  color: inherit !important;
}

html body #reto-tipo-screen #reto-tipo-panel {
  width: min(94vw, 520px) !important;
  max-width: 520px !important;
  max-height: none !important;
  margin: auto !important;
  padding: clamp(26px, 4.8vw, 40px) clamp(20px, 4.5vw, 34px) !important;
  border: 2px solid rgba(28, 141, 255, 0.95) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 116, 235, 0.28), transparent 40%),
    linear-gradient(180deg, rgba(6, 48, 91, 0.98), rgba(1, 12, 27, 0.99)) !important;
  box-shadow:
    inset 0 0 46px rgba(0, 136, 255, 0.12),
    0 0 34px rgba(0, 132, 255, 0.18),
    0 24px 50px rgba(0, 0, 0, 0.38) !important;
  overflow: visible !important;
  text-align: center !important;
}

html body #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge {
  position: relative !important;
  width: clamp(86px, 18vw, 116px) !important;
  height: clamp(86px, 18vw, 116px) !important;
  margin: 0 auto clamp(22px, 3.8vw, 30px) !important;
  border-radius: 50% !important;
  border: 2px solid rgba(35, 159, 255, 0.78) !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(18, 97, 181, 0.72), rgba(2, 29, 62, 0.94) 66%),
    linear-gradient(180deg, rgba(11, 68, 128, 0.94), rgba(0, 16, 42, 0.98)) !important;
  box-shadow:
    0 0 0 10px rgba(0, 151, 255, 0.08),
    0 0 32px rgba(0, 157, 255, 0.35),
    inset 0 0 24px rgba(68, 178, 255, 0.18) !important;
}

html body #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge::before {
  content: "⚔" !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-size: clamp(54px, 11vw, 76px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.45) !important;
  transform: none !important;
}

html body #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge::after {
  content: "" !important;
  position: absolute !important;
  inset: -15px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 7% 33%, #25b9ff 0 2px, transparent 3px),
    radial-gradient(circle at 92% 23%, #ff4e68 0 2px, transparent 3px),
    radial-gradient(circle at 84% 91%, #1fb7ff 0 2px, transparent 3px),
    radial-gradient(circle at 18% 86%, #ff4e68 0 2px, transparent 3px) !important;
  box-shadow: none !important;
}

html body #reto-tipo-screen #reto-tipo-panel .reto-dialog-titulo {
  width: 100% !important;
  margin: 0 auto 8px !important;
  color: #ffffff !important;
  font-size: clamp(38px, 7vw, 58px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-wrap: balance !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.48) !important;
}

html body #reto-tipo-screen #reto-tipo-panel .mode-select-subtitle {
  position: relative !important;
  margin: 0 0 clamp(34px, 5vw, 46px) !important;
  color: rgba(220, 234, 255, 0.86) !important;
  font-size: clamp(20px, 3.7vw, 28px) !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  text-align: center !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.42) !important;
}

html body #reto-tipo-screen #reto-tipo-panel .mode-select-subtitle::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: clamp(-23px, -3vw, -18px) !important;
  width: 116px !important;
  height: 2px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(90deg, transparent, rgba(42, 184, 255, 0.86), transparent) !important;
  box-shadow: 0 0 12px rgba(42, 184, 255, 0.55) !important;
}

html body #reto-tipo-screen #reto-tipo-botones {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(14px, 2.8vw, 22px) !important;
  width: 100% !important;
  margin: 0 0 clamp(18px, 3.2vw, 28px) !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto {
  position: relative !important;
  width: 100% !important;
  min-height: clamp(124px, 21vw, 156px) !important;
  padding: clamp(18px, 3.5vw, 24px) clamp(18px, 4vw, 28px) !important;
  display: grid !important;
  grid-template-columns: clamp(92px, 17vw, 118px) minmax(0, 1fr) 34px !important;
  grid-template-rows: auto auto !important;
  column-gap: clamp(20px, 4vw, 28px) !important;
  row-gap: 8px !important;
  align-items: center !important;
  border-radius: 16px !important;
  border: 2px solid rgba(88, 145, 200, 0.62) !important;
  background:
    radial-gradient(circle at 14% 50%, rgba(30, 154, 255, 0.2), transparent 30%),
    linear-gradient(180deg, rgba(3, 38, 75, 0.98), rgba(1, 18, 39, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.28) !important;
  text-align: left !important;
  transform: none !important;
  overflow: hidden !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto:first-child {
  border-color: #1dd7ff !important;
  background:
    radial-gradient(circle at 14% 50%, rgba(45, 187, 255, 0.32), transparent 32%),
    linear-gradient(180deg, rgba(7, 72, 125, 0.99), rgba(2, 28, 62, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 30px rgba(0, 184, 255, 0.24),
    0 16px 32px rgba(0, 0, 0, 0.3) !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto::before {
  content: none !important;
  display: none !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto::after {
  content: "›" !important;
  position: static !important;
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: end !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: rgba(196, 224, 255, 0.86) !important;
  font-size: clamp(48px, 8vw, 62px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: none !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto:first-child::after {
  color: #32aeff !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-icono {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: center !important;
  position: static !important;
  width: clamp(86px, 16vw, 108px) !important;
  height: clamp(86px, 16vw, 108px) !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid rgba(133, 190, 255, 0.42) !important;
  background:
    radial-gradient(circle at 32% 23%, rgba(255, 255, 255, 0.5), transparent 18%),
    linear-gradient(180deg, #35bbff, #005ed8) !important;
  box-shadow:
    0 0 24px rgba(38, 158, 255, 0.52),
    inset 0 -8px 18px rgba(0, 48, 160, 0.24) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  transform: none !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-icono::after {
  content: none !important;
  display: none !important;
}

html body #reto-tipo-screen #reto-tipo-1v1-btn .btn-tipo-icono::before {
  content: "VS" !important;
  color: #ffffff !important;
  font-size: clamp(25px, 5vw, 35px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 3px 9px rgba(0, 24, 72, 0.58) !important;
}

html body #reto-tipo-screen #reto-tipo-grupo-btn .btn-tipo-icono::before {
  content: "" !important;
  width: clamp(50px, 9vw, 62px) !important;
  height: clamp(39px, 7vw, 48px) !important;
  display: block !important;
  background:
    radial-gradient(circle at 50% 17%, #f8fdff 0 7px, transparent 7.5px),
    radial-gradient(circle at 24% 35%, #e6f5ff 0 7px, transparent 7.5px),
    radial-gradient(circle at 76% 35%, #d8f4ff 0 7px, transparent 7.5px),
    radial-gradient(ellipse at 50% 86%, #f6fcff 0 14px, transparent 14.5px),
    radial-gradient(ellipse at 24% 92%, #e2f3ff 0 10px, transparent 10.5px),
    radial-gradient(ellipse at 76% 92%, #d8f4ff 0 10px, transparent 10.5px) !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  justify-self: start !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(34px, 6.5vw, 46px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.46) !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  justify-self: start !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #33aeff !important;
  font-size: clamp(19px, 3.8vw, 25px) !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: pre-line !important;
  overflow: visible !important;
  opacity: 1 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.34) !important;
}

html body #reto-tipo-screen #reto-tipo-cancelar-btn {
  width: 100% !important;
  min-height: clamp(68px, 12vw, 84px) !important;
  margin: 0 !important;
  padding: 10px clamp(18px, 4vw, 28px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 4vw, 28px) !important;
  border-radius: 16px !important;
  border: 2px solid rgba(126, 178, 225, 0.64) !important;
  background:
    linear-gradient(180deg, rgba(27, 57, 91, 0.92), rgba(8, 25, 48, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 24px rgba(0, 0, 0, 0.28) !important;
  color: #ffffff !important;
  font-size: clamp(28px, 5.4vw, 38px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html body #reto-tipo-screen #reto-tipo-cancelar-btn::before {
  content: "⌂" !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  color: rgba(231, 243, 255, 0.9) !important;
  font-size: clamp(30px, 6vw, 42px) !important;
  line-height: 1 !important;
  transform: none !important;
}

@media (max-width: 430px), (max-height: 760px) {
  html body #reto-tipo-screen {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel {
    width: min(94vw, 400px) !important;
    padding: 22px 16px 18px !important;
    border-radius: 15px !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 18px !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge::before {
    font-size: 48px !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel .reto-dialog-titulo {
    font-size: clamp(31px, 8vw, 36px) !important;
    line-height: 1.08 !important;
    margin-bottom: 8px !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel .mode-select-subtitle {
    margin-bottom: 30px !important;
    font-size: 16px !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel .mode-select-subtitle::after {
    bottom: -18px !important;
    width: 88px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones {
    gap: 14px !important;
    margin-bottom: 16px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto {
    grid-template-columns: 76px minmax(0, 1fr) 24px !important;
    min-height: 104px !important;
    padding: 14px 12px !important;
    column-gap: 14px !important;
    row-gap: 6px !important;
    border-radius: 12px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-icono {
    width: 66px !important;
    height: 66px !important;
  }

  html body #reto-tipo-screen #reto-tipo-1v1-btn .btn-tipo-icono::before {
    font-size: 22px !important;
  }

  html body #reto-tipo-screen #reto-tipo-grupo-btn .btn-tipo-icono::before {
    width: 42px !important;
    height: 34px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto::after {
    font-size: 38px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
    font-size: clamp(28px, 7.2vw, 31px) !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small {
    font-size: 15px !important;
    line-height: 1.18 !important;
  }

  html body #reto-tipo-screen #reto-tipo-cancelar-btn {
    min-height: 58px !important;
    border-radius: 12px !important;
    font-size: 22px !important;
    gap: 14px !important;
  }

  html body #reto-tipo-screen #reto-tipo-cancelar-btn::before {
    font-size: 25px !important;
  }
}

/* Mobile real viewport correction: the browser screenshot is wider than 430px
   but still needs the compact mockup proportions. */
@media (max-width: 560px) {
  html body #reto-tipo-screen {
    padding: 12px 10px !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel {
    width: min(94vw, 440px) !important;
    padding: 28px 18px 22px !important;
    border-radius: 16px !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge {
    width: 86px !important;
    height: 86px !important;
    margin-bottom: 24px !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge::before {
    font-size: 58px !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel .reto-dialog-titulo {
    max-width: 360px !important;
    font-size: clamp(38px, 9.2vw, 46px) !important;
    line-height: 1.08 !important;
    margin-bottom: 9px !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel .mode-select-subtitle {
    font-size: 18px !important;
    margin-bottom: 36px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones {
    gap: 16px !important;
    margin-bottom: 18px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto {
    min-height: 126px !important;
    grid-template-columns: 82px minmax(0, 1fr) 22px !important;
    column-gap: 14px !important;
    row-gap: 7px !important;
    padding: 16px 14px !important;
    border-radius: 13px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-icono {
    width: 76px !important;
    height: 76px !important;
  }

  html body #reto-tipo-screen #reto-tipo-1v1-btn .btn-tipo-icono::before {
    font-size: 24px !important;
  }

  html body #reto-tipo-screen #reto-tipo-grupo-btn .btn-tipo-icono::before {
    width: 46px !important;
    height: 36px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
    font-size: clamp(30px, 7.2vw, 36px) !important;
    line-height: 1 !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small {
    font-size: clamp(16px, 4vw, 18px) !important;
    line-height: 1.22 !important;
    font-weight: 720 !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto::after {
    font-size: 42px !important;
  }

  html body #reto-tipo-screen #reto-tipo-cancelar-btn {
    min-height: 64px !important;
    border-radius: 13px !important;
    font-size: 26px !important;
  }
}

/* Exact mockup pass: challenge type screen with create action. */
html body #reto-tipo-screen {
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(10, 76, 145, 0.2), transparent 42%),
    #020a14 !important;
}

html body #reto-tipo-screen #reto-tipo-panel {
  width: min(94vw, 520px) !important;
  max-width: 520px !important;
  margin: auto !important;
  padding: 28px 28px 22px !important;
  border: 2px solid #147cff !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 50% 2%, rgba(13, 90, 172, 0.34), transparent 42%),
    linear-gradient(180deg, #052b55 0%, #020b18 100%) !important;
  box-shadow:
    inset 0 0 46px rgba(0, 139, 255, 0.12),
    0 18px 42px rgba(0, 0, 0, 0.38) !important;
  overflow: visible !important;
}

html body #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge {
  width: 118px !important;
  height: 118px !important;
  margin: 0 auto 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge::before {
  content: "⚔️" !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
  font-size: 88px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 18px rgba(39, 183, 255, 0.55)) !important;
  text-shadow: none !important;
}

html body #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge::after {
  content: "" !important;
  position: absolute !important;
  inset: 18px !important;
  border: 2px solid rgba(40, 173, 255, 0.82) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 7% 38%, #28b9ff 0 2px, transparent 3px),
    radial-gradient(circle at 95% 28%, #ff4d61 0 2px, transparent 3px),
    radial-gradient(circle at 86% 83%, #ff4d61 0 2px, transparent 3px),
    radial-gradient(circle at 12% 86%, #28b9ff 0 2px, transparent 3px) !important;
  box-shadow:
    0 0 22px rgba(36, 172, 255, 0.55),
    inset 0 0 20px rgba(36, 172, 255, 0.18) !important;
  z-index: -1 !important;
}

html body #reto-tipo-screen #reto-tipo-panel .reto-dialog-titulo {
  max-width: 390px !important;
  margin: 0 auto 8px !important;
  font-size: 43px !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  text-align: center !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  text-shadow: 0 5px 10px rgba(0, 0, 0, 0.58) !important;
}

html body #reto-tipo-screen #reto-tipo-panel .mode-select-subtitle {
  margin: 0 0 35px !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 520 !important;
  color: #c8d5e8 !important;
  text-align: center !important;
}

html body #reto-tipo-screen #reto-tipo-panel .mode-select-subtitle::after {
  bottom: -20px !important;
  width: 112px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(43, 185, 255, 0.75), transparent) !important;
}

html body #reto-tipo-screen #reto-tipo-botones {
  gap: 14px !important;
  margin: 0 0 18px !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto {
  min-height: 128px !important;
  padding: 16px 22px !important;
  grid-template-columns: 102px minmax(0, 1fr) 28px !important;
  column-gap: 22px !important;
  row-gap: 4px !important;
  border-radius: 14px !important;
  border: 2px solid rgba(79, 132, 187, 0.78) !important;
  background:
    radial-gradient(circle at 17% 50%, rgba(42, 160, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(5, 43, 83, 0.98), rgba(2, 17, 38, 0.99)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  opacity: 0.78 !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto.is-selected {
  border-color: #14d4ff !important;
  background:
    radial-gradient(circle at 17% 50%, rgba(51, 189, 255, 0.3), transparent 34%),
    linear-gradient(180deg, rgba(6, 71, 125, 0.99), rgba(2, 34, 68, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 24px rgba(0, 189, 255, 0.22) !important;
  opacity: 1 !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-icono {
  width: 86px !important;
  height: 86px !important;
  border: 2px solid rgba(121, 168, 222, 0.64) !important;
  background:
    radial-gradient(circle at 33% 22%, rgba(255, 255, 255, 0.42), transparent 18%),
    linear-gradient(180deg, #2ebcff 0%, #005bd5 84%) !important;
  box-shadow:
    0 0 18px rgba(42, 167, 255, 0.46),
    inset 0 -11px 18px rgba(0, 41, 142, 0.32) !important;
}

html body #reto-tipo-screen #reto-tipo-1v1-btn .btn-tipo-icono::before {
  content: "VS" !important;
  font-size: 24px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 13, 61, 0.8) !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
  font-size: 28px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  align-self: end !important;
  text-transform: uppercase !important;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.52) !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small {
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: #c3ccda !important;
  font-weight: 520 !important;
  white-space: pre-line !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small::first-line {
  color: #29aaff !important;
  font-size: 19px !important;
  font-weight: 620 !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto::after {
  content: "›" !important;
  color: #a7c8ee !important;
  font-size: 46px !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto.is-selected::after {
  color: #23a9ff !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto em {
  position: absolute !important;
  right: 15px !important;
  top: 12px !important;
  display: none !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(20, 196, 93, 0.96), rgba(7, 132, 61, 0.96)) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 12px rgba(24, 210, 111, 0.28) !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto em::before {
  content: "✓" !important;
  font-size: 12px !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto.is-selected em {
  display: inline-flex !important;
}

html body #reto-tipo-screen .reto-type-expiry {
  width: fit-content !important;
  max-width: 100% !important;
  margin: -4px auto 16px !important;
  padding: 8px 15px !important;
  border: 1px solid rgba(65, 157, 255, 0.45) !important;
  border-radius: 999px !important;
  background: rgba(5, 45, 88, 0.78) !important;
  color: rgba(218, 232, 255, 0.88) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html body #reto-tipo-screen .reto-type-create-btn,
html body #reto-tipo-screen #reto-tipo-cancelar-btn {
  width: 100% !important;
  min-height: 92px !important;
  margin: 0 0 14px !important;
  padding: 14px 22px !important;
  display: grid !important;
  grid-template-columns: 108px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 14px !important;
  border-radius: 14px !important;
  text-align: left !important;
  cursor: pointer !important;
}

html body #reto-tipo-screen .reto-type-create-btn {
  border: 2px solid #24a9ff !important;
  background: linear-gradient(135deg, #18b7ff 0%, #0057df 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 22px rgba(0, 151, 255, 0.32) !important;
  color: #ffffff !important;
}

html body #reto-tipo-screen .reto-type-create-icon {
  width: 58px !important;
  height: 58px !important;
  justify-self: center !important;
  display: grid !important;
  place-items: center !important;
}

html body #reto-tipo-screen .reto-type-create-icon::before {
  content: "🏆" !important;
  font-size: 48px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 3px 8px rgba(0, 44, 126, 0.42)) !important;
}

html body #reto-tipo-screen .reto-type-action-copy {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body #reto-tipo-screen .reto-type-action-copy strong {
  color: #ffffff !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.38) !important;
}

html body #reto-tipo-screen .reto-type-action-copy small {
  color: rgba(221, 234, 255, 0.72) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 520 !important;
}

html body #reto-tipo-screen #reto-tipo-cancelar-btn {
  min-height: 80px !important;
  margin-bottom: 0 !important;
  border: 2px solid rgba(111, 157, 206, 0.72) !important;
  background: linear-gradient(180deg, rgba(27, 54, 85, 0.92), rgba(8, 24, 46, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

html body #reto-tipo-screen #reto-tipo-cancelar-btn::before {
  content: none !important;
  display: none !important;
}

html body #reto-tipo-screen .reto-type-home-icon {
  width: 58px !important;
  height: 58px !important;
  justify-self: center !important;
  display: grid !important;
  place-items: center !important;
}

html body #reto-tipo-screen .reto-type-home-icon::before {
  content: "⌂" !important;
  color: #dce9ff !important;
  font-size: 43px !important;
  line-height: 1 !important;
}

@media (max-width: 560px) {
  html body #reto-tipo-screen #reto-tipo-panel {
    width: min(94vw, 450px) !important;
    padding: 24px 22px 20px !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge {
    width: 104px !important;
    height: 104px !important;
    margin-bottom: 10px !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel .mode-select-hero-challenge::before {
    font-size: 78px !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel .reto-dialog-titulo {
    max-width: 340px !important;
    font-size: clamp(35px, 8.8vw, 43px) !important;
  }

  html body #reto-tipo-screen #reto-tipo-panel .mode-select-subtitle {
    font-size: 18px !important;
    margin-bottom: 34px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto {
    min-height: 118px !important;
    grid-template-columns: 92px minmax(0, 1fr) 24px !important;
    column-gap: 18px !important;
    padding: 14px 18px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto em {
    right: 10px !important;
    top: 9px !important;
    padding: 4px 7px !important;
    font-size: 9px !important;
  }

  html body #reto-tipo-screen .reto-type-expiry {
    margin: -2px auto 14px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-icono {
    width: 78px !important;
    height: 78px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
    font-size: 27px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small {
    font-size: 14px !important;
    line-height: 1.42 !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small::first-line {
    font-size: 17px !important;
  }

  html body #reto-tipo-screen .reto-type-create-btn,
  html body #reto-tipo-screen #reto-tipo-cancelar-btn {
    grid-template-columns: 90px minmax(0, 1fr) !important;
    min-height: 86px !important;
    padding: 12px 18px !important;
  }

  html body #reto-tipo-screen #reto-tipo-cancelar-btn {
    min-height: 74px !important;
  }

  html body #reto-tipo-screen .reto-type-action-copy strong {
    font-size: 25px !important;
  }

  html body #reto-tipo-screen .reto-type-action-copy small {
    font-size: 13px !important;
  }
}

/* Final alignment polish: center copy inside challenge buttons. */
html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto {
  grid-template-rows: 1fr !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
  grid-row: 1 !important;
  align-self: center !important;
  transform: translateY(-13px) !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small {
  grid-row: 1 !important;
  align-self: center !important;
  margin-top: 31px !important;
}

html body #reto-tipo-screen .reto-type-create-btn,
html body #reto-tipo-screen #reto-tipo-cancelar-btn {
  align-items: center !important;
}

html body #reto-tipo-screen .reto-type-action-copy {
  align-self: center !important;
  justify-content: center !important;
}

@media (max-width: 560px) {
  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
    transform: translateY(-11px) !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small {
    margin-top: 28px !important;
  }
}

/* Corrected centered text block inside mode cards. */
html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto {
  grid-template-rows: 1fr auto auto 1fr !important;
  row-gap: 3px !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-icono {
  grid-row: 1 / span 4 !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto::after {
  grid-row: 1 / span 4 !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
  grid-row: 2 !important;
  align-self: end !important;
  transform: none !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small {
  grid-row: 3 !important;
  align-self: start !important;
  margin-top: 0 !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto em {
  top: 10px !important;
}

@media (max-width: 560px) {
  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto {
    row-gap: 3px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
    transform: none !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small {
    margin-top: 0 !important;
  }
}

/* Final detail polish only: icon quality, alignment, badges and compact spacing. */
html body #reto-tipo-screen #reto-tipo-botones {
  gap: 12px !important;
  margin-bottom: 10px !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto {
  min-height: 112px !important;
  grid-template-columns: 92px minmax(0, 1fr) 28px !important;
  grid-template-rows: 1fr auto auto 1fr !important;
  column-gap: 18px !important;
  row-gap: 4px !important;
  padding: 14px 20px !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto > span:not(.btn-tipo-icono) {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: end !important;
  justify-self: start !important;
  transform: none !important;
  margin: 0 !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto small {
  grid-column: 2 !important;
  grid-row: 3 !important;
  align-self: start !important;
  justify-self: start !important;
  margin: 0 !important;
  line-height: 1.32 !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-icono {
  grid-row: 1 / span 4 !important;
  width: 78px !important;
  height: 78px !important;
  overflow: hidden !important;
}

html body #reto-tipo-screen #reto-tipo-1v1-btn .btn-tipo-icono::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  background:
    radial-gradient(circle at 29% 36%, #dff6ff 0 7px, transparent 7.6px),
    radial-gradient(ellipse at 27% 68%, #1d9cff 0 14px, transparent 14.6px),
    radial-gradient(circle at 71% 36%, #ff6a68 0 7px, transparent 7.6px),
    radial-gradient(ellipse at 73% 68%, #e03138 0 14px, transparent 14.6px),
    linear-gradient(135deg, transparent 42%, #27c8ff 42% 48%, #ffffff 48% 52%, #128dff 52% 58%, transparent 58%) !important;
  filter: drop-shadow(0 2px 5px rgba(0, 17, 64, 0.55)) !important;
}

html body #reto-tipo-screen #reto-tipo-1v1-btn .btn-tipo-icono::after {
  content: "" !important;
  position: absolute !important;
  left: 35px !important;
  top: 21px !important;
  width: 13px !important;
  height: 38px !important;
  background: linear-gradient(180deg, #8ef0ff, #008cff) !important;
  clip-path: polygon(62% 0, 34% 39%, 62% 39%, 27% 100%, 40% 55%, 13% 55%) !important;
  filter: drop-shadow(0 0 7px rgba(45, 210, 255, 0.75)) !important;
  transform: rotate(8deg) !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto em {
  top: 13px !important;
  right: 18px !important;
  padding: 6px 11px !important;
  gap: 6px !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 14px rgba(24, 210, 111, 0.32) !important;
}

html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto em::before {
  font-size: 13px !important;
}

html body #reto-tipo-screen .reto-type-expiry {
  margin: 4px auto 10px !important;
  padding: 7px 14px !important;
}

html body #reto-tipo-screen .reto-type-create-btn {
  min-height: 76px !important;
  margin-bottom: 12px !important;
}

html body #reto-tipo-screen .reto-type-create-btn .reto-type-action-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

html body #reto-tipo-screen .reto-type-create-btn .reto-type-action-copy strong {
  font-size: 30px !important;
}

html body #reto-tipo-screen #reto-tipo-cancelar-btn {
  min-height: 72px !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  justify-items: center !important;
  text-align: center !important;
}

html body #reto-tipo-screen #reto-tipo-cancelar-btn .reto-type-home-icon {
  display: none !important;
}

html body #reto-tipo-screen #reto-tipo-cancelar-btn .reto-type-action-copy {
  display: grid !important;
  justify-items: center !important;
  gap: 4px !important;
}

html body #reto-tipo-screen #reto-tipo-cancelar-btn .reto-type-action-copy strong::before {
  content: "⌂" !important;
  margin-right: 12px !important;
  color: #dce9ff !important;
  font-size: 0.95em !important;
  font-weight: 700 !important;
}

html body #reto-tipo-screen .reto-type-create-btn .reto-type-action-copy small {
  display: none !important;
}

@media (max-width: 560px) {
  html body #reto-tipo-screen #reto-tipo-botones {
    gap: 11px !important;
    margin-bottom: 8px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto {
    min-height: 104px !important;
    grid-template-columns: 84px minmax(0, 1fr) 24px !important;
    column-gap: 14px !important;
    padding: 13px 16px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-icono {
    width: 72px !important;
    height: 72px !important;
  }

  html body #reto-tipo-screen #reto-tipo-1v1-btn .btn-tipo-icono::after {
    left: 32px !important;
    top: 19px !important;
    height: 35px !important;
  }

  html body #reto-tipo-screen #reto-tipo-botones .btn-tipo-reto em {
    top: 10px !important;
    right: 12px !important;
    padding: 5px 8px !important;
    font-size: 9px !important;
  }

  html body #reto-tipo-screen .reto-type-expiry {
    margin: 2px auto 9px !important;
  }

  html body #reto-tipo-screen .reto-type-create-btn {
    min-height: 70px !important;
  }

  html body #reto-tipo-screen #reto-tipo-cancelar-btn {
    min-height: 66px !important;
  }
}

/* Definitive two-tab challenge list: Pendientes / Historial. */
html body #retos-screen #retos-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: min(100%, 520px) !important;
  margin: 16px auto 18px !important;
}

html body #retos-screen .reto-tab {
  min-height: 48px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(91, 157, 222, 0.48) !important;
  background: rgba(6, 28, 54, 0.82) !important;
  color: rgba(221, 234, 255, 0.76) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

html body #retos-screen .reto-tab.active {
  border-color: #26b6ff !important;
  background: linear-gradient(135deg, #129eff, #075fe3) !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(24, 157, 255, 0.28) !important;
}

html body #retos-screen #retos-list {
  width: min(100%, 620px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  gap: 10px !important;
  list-style: none !important;
}

html body #retos-screen .reto-list-item {
  width: 100% !important;
  min-height: 92px !important;
  padding: 12px !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(73, 137, 202, 0.58) !important;
  background:
    radial-gradient(circle at 10% 50%, rgba(38, 170, 255, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(3, 36, 70, 0.96), rgba(1, 16, 36, 0.98)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

html body #retos-screen .reto-list-avatar {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid rgba(58, 185, 255, 0.7) !important;
  background: linear-gradient(180deg, #30b9ff, #005bd5) !important;
  box-shadow: 0 0 18px rgba(41, 160, 255, 0.34) !important;
}

html body #retos-screen .reto-list-avatar::before {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}

html body #retos-screen .reto-list-avatar-duel::before { content: "⚔" !important; }
html body #retos-screen .reto-list-avatar-group::before { content: "👥" !important; }
html body #retos-screen .reto-list-avatar-win::before { content: "🏆" !important; }
html body #retos-screen .reto-list-avatar-loss::before { content: "✕" !important; }
html body #retos-screen .reto-list-avatar-draw::before { content: "=" !important; }
html body #retos-screen .reto-list-avatar-expired::before { content: "⏱" !important; }

html body #retos-screen .reto-list-info {
  min-width: 0 !important;
}

html body #retos-screen .reto-list-codigo {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #retos-screen .reto-list-meta {
  margin-top: 4px !important;
  color: #29aaff !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
}

html body #retos-screen .reto-list-status {
  margin-top: 5px !important;
  color: rgba(220, 234, 255, 0.82) !important;
  font-size: 13px !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
}

html body #retos-screen .reto-list-side {
  display: grid !important;
  justify-items: end !important;
  gap: 6px !important;
  color: rgba(222, 236, 255, 0.9) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

html body #retos-screen .reto-list-time {
  color: #ffd84a !important;
  font-size: 13px !important;
}

html body #retos-screen .reto-list-score {
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

html body #retos-screen .reto-tone-win .reto-list-codigo { color: #36dc70 !important; }
html body #retos-screen .reto-tone-loss .reto-list-codigo { color: #ff5058 !important; }
html body #retos-screen .reto-tone-draw .reto-list-codigo { color: #dfe7f3 !important; }
html body #retos-screen .reto-tone-group .reto-list-codigo { color: #ff9a2f !important; }
html body #retos-screen .reto-tone-expired .reto-list-codigo { color: #aebbd0 !important; }
html body #retos-screen .reto-tone-turn { border-color: rgba(37, 196, 255, 0.88) !important; }

html body #retos-screen .reto-list-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  margin-top: -2px !important;
}

html body #retos-screen .reto-list-btn {
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: linear-gradient(180deg, #168dff, #0757cf) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

html body #retos-screen .reto-list-btn-delete {
  background: linear-gradient(180deg, #36506b, #16263a) !important;
}

html body #retos-screen .reto-list-empty,
html body #retos-screen .reto-list-note {
  padding: 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(89, 151, 214, 0.34) !important;
  background: rgba(3, 25, 48, 0.72) !important;
  color: rgba(224, 236, 255, 0.78) !important;
  text-align: center !important;
  list-style: none !important;
}

html body #retos-screen .reto-list-note {
  font-size: 13px !important;
}

@media (max-width: 560px) {
  html body #retos-screen .reto-list-item {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 86px !important;
  }

  html body #retos-screen .reto-list-avatar {
    width: 46px !important;
    height: 46px !important;
  }

  html body #retos-screen .reto-list-side {
    grid-column: 2 !important;
    justify-items: start !important;
  }

  html body #retos-screen .reto-list-codigo {
    font-size: 18px !important;
  }
}

/* Compact proportion pass for Mis retos. */
html body #retos-screen {
  padding: 18px 16px !important;
}

html body #retos-screen #retos-tabs {
  margin: 12px auto 14px !important;
}

html body #retos-screen .reto-tab {
  min-height: 40px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
}

html body #retos-screen #retos-list {
  gap: 10px !important;
}

html body #retos-screen .reto-list-item {
  min-height: 104px !important;
  padding: 12px 10px !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  gap: 8px 10px !important;
  align-items: center !important;
}

html body #retos-screen .reto-list-avatar {
  width: 44px !important;
  height: 44px !important;
}

html body #retos-screen .reto-list-avatar::before {
  font-size: 20px !important;
}

html body #retos-screen .reto-list-codigo {
  font-size: 18px !important;
}

html body #retos-screen .reto-list-meta {
  margin-top: 2px !important;
  font-size: 12px !important;
}

html body #retos-screen .reto-list-status {
  margin-top: 3px !important;
  font-size: 12px !important;
}

html body #retos-screen .reto-list-side {
  align-self: center !important;
  gap: 4px !important;
}

html body #retos-screen .reto-list-time {
  font-size: 12px !important;
}

html body #retos-screen .reto-list-score {
  font-size: 19px !important;
}

html body #retos-screen .reto-list-actions {
  grid-column: 2 / 4 !important;
  margin-top: 0 !important;
  justify-content: flex-end !important;
}

html body #retos-screen .reto-list-btn {
  min-height: 28px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}

html body #retos-screen .reto-list-note {
  padding: 4px 8px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
  opacity: 0.8 !important;
}

html body #retos-screen .reto-list-empty {
  min-height: 58px !important;
  display: grid !important;
  place-items: center !important;
}

@media (max-width: 560px) {
  html body #retos-screen {
    padding: 14px 12px !important;
  }

  html body #retos-screen .reto-list-item {
    min-height: 98px !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    padding: 11px 9px !important;
  }

  html body #retos-screen .reto-list-avatar {
    width: 40px !important;
    height: 40px !important;
  }

  html body #retos-screen .reto-list-side {
    grid-column: 2 !important;
    justify-items: start !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  html body #retos-screen .reto-list-actions {
    grid-column: 2 !important;
    justify-content: flex-start !important;
  }

  html body #retos-screen .reto-list-btn {
    min-height: 26px !important;
    font-size: 10px !important;
  }
}

/* TRUE FINAL STRUCTURE FIX: Mis retos professional compact list. */
html body #retos-screen #retos-list {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  align-content: stretch !important;
  gap: 12px !important;
  row-gap: 12px !important;
  min-height: unset !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

html body #retos-screen .reto-list-item {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  min-height: unset !important;
  max-height: 130px !important;
  height: auto !important;
  padding: 14px !important;
  gap: 8px 12px !important;
  align-items: center !important;
  align-content: center !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

html body #retos-screen .reto-list-avatar {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: start !important;
  justify-self: center !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
}

html body #retos-screen .reto-list-info {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  align-self: center !important;
}

html body #retos-screen .reto-list-codigo {
  display: block !important;
  max-width: 100% !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #retos-screen .reto-list-meta {
  display: block !important;
  max-width: 100% !important;
  margin-top: 3px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #retos-screen .reto-list-status {
  display: block !important;
  max-width: 100% !important;
  margin-top: 3px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body #retos-screen .reto-list-side {
  grid-column: 3 / 4 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  display: block !important;
  justify-items: end !important;
  gap: 4px !important;
  min-width: max-content !important;
  margin: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

html body #retos-screen .reto-list-time {
  font-size: 12px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html body #retos-screen .reto-list-score {
  font-size: 18px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body #retos-screen .reto-list-actions {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  align-self: start !important;
  justify-self: start !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

html body #retos-screen .reto-list-btn {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 11px !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  position: static !important;
}

@media (max-width: 560px) {
  html body #retos-screen .reto-list-item {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    min-height: unset !important;
    max-height: 130px !important;
    padding: 12px !important;
    gap: 7px 9px !important;
  }

  html body #retos-screen .reto-list-avatar {
    width: 38px !important;
    height: 38px !important;
  }

  html body #retos-screen .reto-list-codigo {
    font-size: 16px !important;
  }

  html body #retos-screen .reto-list-meta {
    font-size: 12px !important;
  }

  html body #retos-screen .reto-list-status {
    font-size: 11px !important;
  }

  html body #retos-screen .reto-list-side {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    justify-items: end !important;
  }

  html body #retos-screen .reto-list-actions {
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
  }

  html body #retos-screen .reto-list-time {
    font-size: 10px !important;
  }

  html body #retos-screen .reto-list-btn {
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 10px !important;
  }
}

/* FINAL TOP BAR AVATAR SIZE OVERRIDE - keep this at the end of the file. */
html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) {
  grid-template-columns: 44px auto minmax(58px, 86px) auto !important;
  min-height: 50px !important;
  min-width: 178px !important;
  max-width: min(76vw, 240px) !important;
  padding: 4px 10px 4px 4px !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .profile-avatar.avatar-profile-frame,
html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .avatar-profile-frame {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  flex: 0 0 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .avatar-profile-frame .avatar-profile {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
}

@media (max-width: 420px) {
  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) {
    grid-template-columns: 40px auto minmax(42px, 58px) auto !important;
    min-height: 46px !important;
    min-width: 164px !important;
    max-width: calc(100vw - 96px) !important;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .profile-avatar.avatar-profile-frame,
  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .avatar-profile-frame {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex-basis: 38px !important;
  }
}

/* FINAL HOME TOP REDESIGN - unified avatar, XP and language bar only on main screen. */
html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) {
  padding-top: max(12px, env(safe-area-inset-top, 12px)) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top {
  order: 1 !important;
  width: min(94vw, 560px) !important;
  min-height: 86px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 auto 12px !important;
  padding: 10px 12px 10px 10px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(38, 158, 255, 0.5) !important;
  background:
    radial-gradient(circle at 11% 50%, rgba(42, 177, 255, 0.25), transparent 28%),
    linear-gradient(135deg, rgba(3, 22, 45, 0.88), rgba(1, 10, 24, 0.78)) !important;
  box-shadow:
    0 0 24px rgba(22, 143, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(105, 198, 255, 0.08) !important;
  backdrop-filter: blur(14px) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: 64px auto minmax(92px, 1fr) 42px !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 64px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .profile-avatar.avatar-profile-frame,
html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .avatar-profile-frame {
  grid-column: 1 !important;
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  flex: 0 0 62px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid rgba(165, 230, 255, 0.96) !important;
  background: #041a36 !important;
  box-shadow:
    0 0 0 3px rgba(23, 134, 255, 0.18),
    0 0 22px rgba(44, 176, 255, 0.52),
    inset 0 0 14px rgba(77, 191, 255, 0.18) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .avatar-profile-frame .avatar-profile {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  filter: none !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .auth-nivel-wrap {
  display: contents !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-label {
  grid-column: 2 !important;
  justify-self: start !important;
  color: #ffffff !important;
  font-size: clamp(23px, 5vw, 31px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 0 15px rgba(92, 189, 255, 0.42), 0 2px 8px rgba(0, 0, 0, 0.45) !important;
  white-space: nowrap !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-bar {
  grid-column: 3 !important;
  width: 100% !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(72, 91, 116, 0.82), rgba(10, 18, 31, 0.86)) !important;
  border: 1px solid rgba(121, 190, 255, 0.22) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.44), 0 0 10px rgba(32, 147, 255, 0.13) !important;
  overflow: hidden !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-fill {
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, #80e4ff 0%, #0ba5ff 48%, #005fd8 100%) !important;
  box-shadow: 0 0 14px rgba(60, 187, 255, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-percent {
  grid-column: 4 !important;
  justify-self: end !important;
  min-width: 38px !important;
  color: #20a8ff !important;
  font-size: clamp(19px, 4.5vw, 26px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: right !important;
  text-shadow: 0 0 13px rgba(38, 178, 255, 0.42) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #lang-selector {
  grid-column: 2 !important;
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(50px, 1fr)) !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #lang-selector .lang-btn {
  min-width: 52px !important;
  height: 48px !important;
  padding: 0 12px !important;
  border-radius: 15px !important;
  border: 1px solid rgba(71, 162, 255, 0.5) !important;
  background: rgba(5, 20, 42, 0.74) !important;
  color: rgba(226, 239, 255, 0.78) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 12px rgba(18, 113, 225, 0.12) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #lang-selector .lang-btn.active {
  border-color: rgba(91, 207, 255, 0.78) !important;
  background: linear-gradient(180deg, #169dff, #0759d5) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(28, 153, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #game-logo {
  order: 2 !important;
  width: clamp(150px, 34vw, 212px) !important;
  height: auto !important;
  margin: 2px auto 8px !important;
  filter:
    drop-shadow(0 0 26px rgba(30, 153, 255, 0.62))
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.42)) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #game-logo::before {
  content: none !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .intro-title {
  order: 3 !important;
  max-width: min(92vw, 720px) !important;
  margin: 0 auto 4px !important;
  color: #ffffff !important;
  font-size: clamp(34px, 7vw, 58px) !important;
  line-height: 0.98 !important;
  font-weight: 950 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.54), 0 0 22px rgba(44, 155, 255, 0.18) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .intro-text {
  order: 4 !important;
  margin: 0 auto 14px !important;
  color: rgba(222, 235, 255, 0.82) !important;
  font-size: clamp(17px, 3.6vw, 24px) !important;
  text-align: center !important;
}

@media (max-width: 520px) {
  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top {
    width: min(95vw, 430px) !important;
    min-height: 76px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 23px !important;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) {
    grid-template-columns: 56px auto minmax(64px, 1fr) 34px !important;
    gap: 8px !important;
    min-height: 56px !important;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .profile-avatar.avatar-profile-frame,
  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .avatar-profile-frame {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    flex-basis: 56px !important;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-label {
    font-size: 22px !important;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-bar {
    height: 11px !important;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-percent {
    min-width: 31px !important;
    font-size: 18px !important;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #lang-selector {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #lang-selector .lang-btn {
    min-width: 44px !important;
    height: 32px !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #game-logo {
    width: clamp(138px, 40vw, 176px) !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .intro-title {
    font-size: clamp(30px, 8.8vw, 42px) !important;
    margin-bottom: 3px !important;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .intro-text {
    margin-bottom: 12px !important;
  }
}

/* Banner instalación QuizSBD - versión estable */

.pwa-install-banner {
  order: 5 !important;
  position: relative;
  width: 100%;
  max-width: 560px;
  min-height: 84px;
  margin: 12px auto 18px;
  padding: 12px 44px 12px 16px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  overflow: hidden;
  border: 2px solid rgba(0, 133, 255, 0.82);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 42%, rgba(36, 159, 255, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(3, 35, 78, 0.96), rgba(0, 10, 28, 0.98) 62%, rgba(0, 25, 63, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(169, 226, 255, 0.16),
    inset 0 0 28px rgba(0, 118, 255, 0.11),
    0 0 0 1px rgba(105, 201, 255, 0.12),
    0 12px 28px rgba(0, 0, 0, 0.32),
    0 0 22px rgba(0, 128, 255, 0.24);
  color: #ffffff;
}

.pwa-install-banner:has(#pwa-install-btn.pwa-install-btn.hidden),
.pwa-install-banner:has(#pwa-install-btn.pwa-install-btn[hidden]) {
  display: none !important;
}

.pwa-install-banner-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 13px;
  border: 2px solid rgba(74, 175, 255, 0.68);
  background:
    linear-gradient(180deg, transparent 0 17%, rgba(210, 238, 255, 0.95) 17% 23%, transparent 23%),
    linear-gradient(90deg, transparent 0 43%, #ffffff 43% 57%, transparent 57%),
    radial-gradient(circle at 50% 72%, rgba(255, 255, 255, 0.98) 0 6px, transparent 7px),
    linear-gradient(180deg, rgba(12, 83, 179, 0.96), rgba(1, 20, 60, 0.98));
  box-shadow:
    0 0 18px rgba(30, 153, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: rotate(-6deg);
}

.pwa-install-banner-copy {
  min-width: 0;
  text-align: left;
}

.pwa-install-banner-copy strong {
  display: block;
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.05;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 11px rgba(0, 0, 0, 0.5);
}

.pwa-install-banner-copy small {
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
  color: rgba(213, 233, 255, 0.9);
  opacity: 1;
}

.pwa-install-icon {
  display: none !important;
}

#pwa-install-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pwa-install-banner > #pwa-install-btn.pwa-install-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 116px;
  max-width: none !important;
  height: 46px;
  padding: 0 22px !important;
  margin: 0 !important;
  border: 1px solid rgba(125, 216, 255, 0.88) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(54, 188, 255, 0.98), rgba(0, 96, 240, 0.98) 52%, rgba(0, 58, 199, 0.98)) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 2px 8px rgba(0, 27, 103, 0.52) !important;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -10px 18px rgba(0, 21, 130, 0.28),
    0 10px 20px rgba(0, 83, 255, 0.3),
    0 0 18px rgba(58, 183, 255, 0.24) !important;
}

.pwa-install-banner > #pwa-install-btn.pwa-install-btn.hidden,
.pwa-install-banner > #pwa-install-btn.pwa-install-btn[hidden] {
  display: none !important;
}

.pwa-install-banner-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: rgba(68, 167, 255, 0.95);
  font-size: 26px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 14px rgba(0, 128, 255, 0.42);
  pointer-events: none;
}

.pwa-install-action-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

#pwa-install-modal {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top, 18px)) 16px max(18px, env(safe-area-inset-bottom, 18px));
  background:
    radial-gradient(circle at 50% 12%, rgba(43, 156, 255, 0.18), transparent 34%),
    rgba(1, 8, 20, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#pwa-install-modal.hidden {
  display: none !important;
}

.pwa-install-card {
  position: relative;
  width: min(92vw, 430px);
  border-radius: 18px;
  border: 1px solid rgba(50, 168, 255, 0.56);
  background:
    radial-gradient(circle at 16% 0%, rgba(46, 168, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(5, 28, 55, 0.96), rgba(0, 10, 25, 0.98));
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.58),
    0 0 34px rgba(0, 133, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  padding: 22px 18px 20px;
  color: #ffffff;
  text-align: center;
}

.pwa-install-card h2 {
  margin: 0 34px 18px;
  color: #ffffff;
  font-size: clamp(20px, 5vw, 25px);
  font-weight: 950;
  line-height: 1.08;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.52), 0 0 18px rgba(69, 181, 255, 0.2);
}

.pwa-install-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(92, 177, 255, 0.42);
  background: rgba(3, 20, 42, 0.72);
  color: rgba(228, 241, 255, 0.86);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 12px rgba(0, 129, 255, 0.14);
  cursor: pointer;
}

.pwa-install-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pwa-install-steps li {
  position: relative;
  display: grid;
  grid-template-rows: 22px 64px auto;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  color: rgba(237, 247, 255, 0.92);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.pwa-step-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, #39c5ff, #0764dd);
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 0 18px rgba(42, 169, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.pwa-step-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 13px;
  border: 1px solid rgba(96, 180, 255, 0.5);
  background: linear-gradient(180deg, rgba(134, 162, 190, 0.72), rgba(34, 55, 82, 0.82));
  color: #ffffff;
  font-size: 34px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 22px rgba(0, 0, 0, 0.36);
}

.pwa-step-logo {
  background:
    url("logo.png") center / 42px 42px no-repeat,
    linear-gradient(180deg, rgba(2, 36, 73, 0.82), rgba(0, 12, 31, 0.9));
}

@media (max-width: 600px) {
  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .pwa-install-banner {
    max-width: calc(100vw - 28px);
    min-height: 78px;
    padding: 10px 38px 10px 12px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    border-radius: 16px;
  }

  .pwa-install-banner-icon {
    width: 46px;
    height: 46px;
  }

  .pwa-install-banner-copy strong {
    font-size: 18px;
  }

  .pwa-install-banner-copy small {
    display: none;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .pwa-install-banner > #pwa-install-btn.pwa-install-btn {
    min-width: 96px;
    height: 40px;
    padding: 0 16px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }

  .pwa-install-card {
    padding: 20px 14px 18px;
  }

  .pwa-install-steps {
    gap: 8px;
  }

  .pwa-install-steps li {
    grid-template-rows: 20px 56px auto;
    font-size: 11px;
  }

  .pwa-step-icon {
    width: 56px;
    height: 56px;
    font-size: 30px;
  }
}

@media (max-width: 380px) {
  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .pwa-install-banner {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    padding-left: 10px;
    min-height: 74px;
  }

  .pwa-install-banner-icon {
    width: 40px;
    height: 40px;
  }

  .pwa-install-banner-copy strong {
    font-size: 16px;
  }

  html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .pwa-install-banner > #pwa-install-btn.pwa-install-btn {
    min-width: 86px;
    height: 38px;
    padding: 0 12px !important;
    font-size: 14px !important;
  }
}

/* Prevent mobile viewport clipping without changing the challenge modal design. */
html body #reto-tipo-screen {
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Keep the create challenge button on one centered line. */
html body #reto-tipo-screen .reto-type-create-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  text-align: center !important;
}

html body #reto-tipo-screen .reto-type-create-btn .reto-type-create-icon {
  flex: 0 0 auto !important;
  justify-self: auto !important;
}

html body #reto-tipo-screen .reto-type-create-btn .reto-type-action-copy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  justify-self: auto !important;
}

html body #reto-tipo-screen .reto-type-create-btn .reto-type-action-copy strong {
  white-space: nowrap !important;
}

/* Camino Arlequinado: no hay vidas ni comodines, solo 5 preguntas. */
.camino-helps {
  display: none !important;
}

html body.camino-game-active #vidas-externas,
html body.camino-game-active #vidas-externas-mobile,
html body.camino-game-active #game-panel #comodin-5050,
html body.camino-game-active #game-panel #comodin-saltar {
  display: none !important;
}

/* Reto final: compactar y subir el panel en iPhone pequeno. */
@media (max-height: 720px), (max-width: 390px) {
  html body #reto-resultado-screen.challenge-final-screen {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: max(6px, env(safe-area-inset-top)) 5px max(6px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  html body #reto-resultado-screen.challenge-final-screen #reto-resultado-panel {
    margin: 0 auto !important;
    padding: 5px !important;
    width: min(calc(100vw - 10px), 420px) !important;
  }

  html body #reto-resultado-screen.challenge-final-screen .reto-result-shell {
    padding: 8px 8px 7px !important;
    border-radius: 12px !important;
  }

  html body #reto-resultado-screen.challenge-final-screen .reto-final-stats {
    gap: 7px !important;
    margin: 7px 0 !important;
  }

  html body #reto-resultado-screen.challenge-final-screen .reto-final-stat,
  html body #reto-resultado-screen.challenge-final-screen .reto-result-shell .reto-final-stat {
    min-height: 76px !important;
    height: 76px !important;
    padding: 7px 6px !important;
  }

  html body #reto-resultado-screen.challenge-final-screen .reto-final-stat span {
    font-size: 10px !important;
  }

  html body #reto-resultado-screen.challenge-final-screen .reto-final-stat strong {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  html body #reto-resultado-screen.challenge-final-screen .reto-result-actions {
    gap: 7px !important;
    margin: 7px 0 0 !important;
  }

  html body #reto-resultado-screen.challenge-final-screen .reto-result-actions button {
    min-height: 38px !important;
    padding: 7px 6px !important;
  }
}

/* Reto tipo: Inicio debe ser solo texto para caber en moviles pequenos. */
html body #reto-tipo-screen #reto-tipo-cancelar-btn {
  min-height: 48px !important;
  height: auto !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  text-align: center !important;
}

html body #reto-tipo-screen #reto-tipo-cancelar-btn .reto-type-home-icon,
html body #reto-tipo-screen #reto-tipo-cancelar-btn .reto-type-action-copy small {
  display: none !important;
}

html body #reto-tipo-screen #reto-tipo-cancelar-btn .reto-type-action-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  gap: 0 !important;
}

html body #reto-tipo-screen #reto-tipo-cancelar-btn .reto-type-action-copy strong {
  font-size: clamp(18px, 5vw, 23px) !important;
  line-height: 1 !important;
}

html body #reto-tipo-screen #reto-tipo-cancelar-btn .reto-type-action-copy strong::before {
  content: none !important;
}

@media (max-width: 390px), (max-height: 720px) {
  html body #reto-tipo-screen #reto-tipo-panel {
    gap: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  html body #reto-tipo-screen #reto-tipo-cancelar-btn {
    min-height: 44px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* ==================================================
   CE SABADELL — CAPA CROMÁTICA OFICIAL
   SOLO COLORES — NO MODIFICAR ESTRUCTURA
   ================================================== */

:root {
  --ces-blue: #075DB8;
  --ces-blue-strong: #0051A8;
  --ces-blue-dark: #082B5C;
  --ces-text: #0A2E63;
  --ces-blue-soft: #4B91D1;
  --ces-bg: #F2F7FC;
  --ces-white: #FFFFFF;
  --ces-border: #B8D2EA;
  --ces-text-secondary: #52677D;
  --ces-shadow: rgba(7, 75, 145, 0.18);
}

/* Base y pantalla de arranque. */
:root,
html,
body {
  background-color: var(--ces-bg);
  color: var(--ces-text);
  accent-color: var(--ces-blue);
}

body.app-booting {
  background:
    radial-gradient(circle at 50% 34%, rgba(75, 145, 209, 0.2), transparent 28%),
    radial-gradient(circle at 12% 18%, rgba(7, 93, 184, 0.1), transparent 24%),
    radial-gradient(circle at 88% 76%, rgba(0, 81, 168, 0.1), transparent 28%),
    linear-gradient(145deg, var(--ces-white) 0%, var(--ces-bg) 44%, #E4EFF9 100%);
  color: var(--ces-text);
}

body.app-booting::before {
  background:
    linear-gradient(115deg, transparent 0 13%, rgba(75, 145, 209, 0.08) 14%, transparent 18% 100%),
    linear-gradient(245deg, transparent 0 18%, rgba(75, 145, 209, 0.07) 19%, transparent 23% 100%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 81, 168, 0.12), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(184, 210, 234, 0.22));
}

body.app-booting::after,
.boot-logo-wrap::before {
  background: radial-gradient(circle, rgba(75, 145, 209, 0.24) 0 16%, rgba(7, 93, 184, 0.14) 24%, transparent 58%);
}

.boot-logo {
  filter:
    drop-shadow(0 24px 26px rgba(4, 21, 47, 0.42))
    drop-shadow(0 0 22px rgba(7, 75, 145, 0.18));
}

.boot-title h1,
.boot-loading-label {
  color: var(--ces-text);
}

.boot-title h1 {
  text-shadow: 0 12px 30px rgba(7, 75, 145, 0.18), 0 0 24px rgba(7, 75, 145, 0.08);
}

.boot-subtitle {
  color: var(--ces-blue-soft);
  text-shadow: 0 0 18px rgba(7, 75, 145, 0.18);
}

.boot-subtitle::before {
  background: linear-gradient(90deg, transparent, rgba(184, 210, 234, 0.8) 42%, var(--ces-white) 50%, rgba(184, 210, 234, 0.8) 58%, transparent);
  box-shadow: 0 0 14px var(--ces-shadow);
}

.boot-progress {
  border-color: rgba(184, 210, 234, 0.42);
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 8px 18px rgba(7, 75, 145, 0.08),
    0 14px 34px rgba(7, 75, 145, 0.14),
    0 0 24px var(--ces-shadow);
}

.boot-progress::before {
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.28), transparent 19% 36%, rgba(255, 255, 255, 0.26) 50%, transparent 66%) 0 0 / 170px 100%,
    linear-gradient(90deg, var(--ces-blue-strong), var(--ces-blue) 70%, var(--ces-blue-soft));
  box-shadow: 0 0 20px var(--ces-shadow);
}

.boot-message {
  color: var(--ces-text-secondary);
}

/* Inicio, controles superiores e idioma. */
#inicio-screen {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(242, 247, 252, 0.74) 43%, rgba(226, 239, 249, 0.56) 72%, rgba(255, 255, 255, 0.92) 100%),
    url("assets/estadi-portada.png") center 56% / cover no-repeat;
}

#inicio-screen::after {
  background:
    radial-gradient(circle at 50% 8%, rgba(75, 145, 209, 0.1), transparent 24%),
    radial-gradient(circle at 50% 92%, rgba(7, 93, 184, 0.08), transparent 34%),
    linear-gradient(90deg, rgba(184, 210, 234, 0.16), transparent 24%, transparent 76%, rgba(184, 210, 234, 0.16));
}

.audio-toggle-btn,
#inicio-screen #lang-selector .lang-btn.active {
  border-color: rgba(184, 210, 234, 0.42) !important;
  background: var(--ces-white) !important;
  color: var(--ces-blue) !important;
  box-shadow: 0 8px 22px rgba(7, 75, 145, 0.18) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top {
  border-color: var(--ces-border) !important;
  background:
    radial-gradient(circle at 11% 50%, rgba(75, 145, 209, 0.1), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 252, 0.94)) !important;
  box-shadow:
    0 0 24px rgba(7, 75, 145, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(184, 210, 234, 0.18) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .profile-avatar.avatar-profile-frame,
html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #auth-session-bar:not(.hidden) .avatar-profile-frame {
  border-color: var(--ces-border) !important;
  background: var(--ces-bg) !important;
  box-shadow:
    0 0 0 3px rgba(7, 93, 184, 0.1),
    0 0 22px rgba(7, 75, 145, 0.14),
    inset 0 0 14px rgba(75, 145, 209, 0.1) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-label,
html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-percent {
  color: var(--ces-text) !important;
  text-shadow: 0 0 15px rgba(7, 75, 145, 0.08), 0 2px 8px rgba(7, 75, 145, 0.12) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-bar {
  border-color: var(--ces-border) !important;
  background: linear-gradient(180deg, #E4EFF9, #D6E6F4) !important;
  box-shadow: inset 0 2px 5px rgba(7, 75, 145, 0.12), 0 0 10px rgba(7, 75, 145, 0.08) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) #auth-session-bar .nivel-fill {
  background: linear-gradient(180deg, var(--ces-blue-soft) 0%, var(--ces-blue) 48%, var(--ces-blue-strong) 100%) !important;
  box-shadow: 0 0 14px rgba(7, 75, 145, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.64) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #game-logo {
  filter:
    drop-shadow(0 0 26px rgba(7, 75, 145, 0.1))
    drop-shadow(0 10px 20px rgba(7, 75, 145, 0.16)) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .intro-title {
  color: var(--ces-text) !important;
  text-shadow: 0 3px 18px rgba(7, 75, 145, 0.14), 0 0 22px rgba(7, 75, 145, 0.06) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > .intro-text {
  color: var(--ces-text-secondary) !important;
}

.audio-toggle-btn:hover {
  background: var(--ces-bg) !important;
}

#inicio-screen #lang-selector .lang-btn,
html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #lang-selector .lang-btn {
  border-color: var(--ces-border) !important;
  background: var(--ces-white) !important;
  color: var(--ces-text) !important;
}

#inicio-screen #lang-selector .lang-btn:hover,
html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #lang-selector .lang-btn:hover {
  background: var(--ces-bg) !important;
  color: var(--ces-text) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .barra-top #lang-selector .lang-btn.active {
  border-color: var(--ces-blue) !important;
  background: linear-gradient(180deg, var(--ces-blue), var(--ces-blue-strong)) !important;
  color: var(--ces-white) !important;
  box-shadow: 0 0 18px rgba(7, 75, 145, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #how-to-play-btn.btn-principal,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta {
  border-color: var(--ces-blue) !important;
  background: var(--ces-white) !important;
  color: var(--ces-blue) !important;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0), 0 0 14px rgba(7, 75, 145, 0.04) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -16px 34px rgba(184, 210, 234, 0.12),
    0 0 0 1px rgba(7, 93, 184, 0.08),
    0 12px 28px rgba(7, 75, 145, 0.08),
    0 0 24px rgba(7, 75, 145, 0.03) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn.btn-desafiar {
  border-color: var(--ces-blue) !important;
  background: var(--ces-white) !important;
  color: var(--ces-blue) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -18px 36px rgba(184, 210, 234, 0.1),
    0 0 0 1px rgba(7, 93, 184, 0.06),
    0 12px 28px rgba(7, 75, 145, 0.08),
    0 0 28px rgba(7, 75, 145, 0.03) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn.btn-desafiar::before {
  filter: drop-shadow(0 7px 10px rgba(7, 75, 145, 0.1)) drop-shadow(0 0 12px rgba(7, 75, 145, 0.06));
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn.btn-desafiar::after {
  border-color: var(--ces-blue) !important;
  box-shadow: 0 0 14px rgba(7, 75, 145, 0.06) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn {
  border-color: var(--ces-blue) !important;
  background: var(--ces-blue) !important;
  color: var(--ces-white) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #how-to-play-btn:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta:hover {
  border-color: var(--ces-blue-soft) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -16px 34px rgba(184, 210, 234, 0.14),
    0 14px 30px rgba(7, 75, 145, 0.1),
    0 0 32px rgba(7, 75, 145, 0.04) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn:hover {
  background: var(--ces-blue) !important;
  color: var(--ces-white) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #how-to-play-btn:hover,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta:hover {
  background: var(--ces-white) !important;
  color: var(--ces-blue) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn.btn-desafiar:hover {
  border-color: var(--ces-blue) !important;
  background: var(--ces-white) !important;
  color: var(--ces-blue) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -18px 36px rgba(184, 210, 234, 0.12),
    0 14px 30px rgba(7, 75, 145, 0.1),
    0 0 34px rgba(7, 75, 145, 0.04) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn::after,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #ranking-btn::after,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-desafiar-btn::after,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #reto-ver-btn::after,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #how-to-play-btn::after,
body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta::after {
  border-color: var(--ces-blue) !important;
  box-shadow: 0 0 12px rgba(7, 75, 145, 0.06) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #start-btn::after {
  border-color: var(--ces-white) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.08) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #btn-diario::after {
  border-color: var(--ces-blue) !important;
  background: var(--ces-blue) !important;
  color: var(--ces-white) !important;
  text-shadow: 0 0 12px rgba(7, 75, 145, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 15px rgba(7, 75, 145, 0.06) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta .community-question-title {
  color: var(--ces-blue) !important;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0), 0 0 14px rgba(7, 75, 145, 0.04) !important;
}

body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) > #enviar-pregunta-btn.community-question-cta .community-question-subtitle {
  color: var(--ces-text-secondary) !important;
}

/* Selector de modo: tres intensidades de azul CE Sabadell. */
.mode-select-screen:has(#modo-selector) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(242, 247, 252, 0.9) 66%, rgba(226, 239, 249, 0.62) 100%),
    url("assets/estadi-portada.png") center bottom / contain no-repeat,
    var(--ces-bg) !important;
}

.mode-select-screen:has(#modo-selector) .mode-select-panel {
  border-color: rgba(184, 210, 234, 0) !important;
  background:
    radial-gradient(circle at 50% 15%, rgba(75, 145, 209, 0), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(242, 247, 252, 0)) !important;
  color: var(--ces-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0),
    0 36px 80px rgba(7, 75, 145, 0),
    0 0 80px rgba(7, 75, 145, 0) !important;
}

.mode-select-screen:has(#modo-selector) .mode-select-title {
  color: var(--ces-text) !important;
  text-shadow: 0 0 18px rgba(7, 75, 145, 0.03) !important;
}

.mode-select-screen:has(#modo-selector) .mode-select-hero {
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(75, 145, 209, 0), transparent 48%),
    linear-gradient(180deg, rgba(75, 145, 209, 0), rgba(0, 81, 168, 0));
  box-shadow: 0 0 0 1px rgba(184, 210, 234, 0), 0 0 42px rgba(7, 75, 145, 0);
}

.mode-select-screen:has(#modo-selector) .mode-select-subtitle,
.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto small {
  color: var(--ces-text-secondary) !important;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto,
.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto[data-modo="5"] {
  border-color: var(--ces-border) !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(75, 145, 209, 0.06), transparent 22%),
    linear-gradient(180deg, var(--ces-white), var(--ces-white)) !important;
  color: var(--ces-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 16px 34px rgba(7, 75, 145, 0.1),
    0 0 24px rgba(7, 75, 145, 0.03) !important;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto[data-modo="10"] {
  border-color: var(--ces-border) !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(75, 145, 209, 0.06), transparent 22%),
    linear-gradient(180deg, var(--ces-white), var(--ces-white)) !important;
  color: var(--ces-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 16px 34px rgba(7, 75, 145, 0.1),
    0 0 24px rgba(7, 75, 145, 0.03) !important;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto[data-modo="20"] {
  border-color: var(--ces-border) !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(75, 145, 209, 0.06), transparent 22%),
    linear-gradient(180deg, var(--ces-white), var(--ces-white)) !important;
  color: var(--ces-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 16px 34px rgba(7, 75, 145, 0.1),
    0 0 24px rgba(7, 75, 145, 0.03) !important;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto[data-modo="5"] small,
.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto[data-modo="20"] small {
  color: var(--ces-text-secondary) !important;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto[data-modo="10"] small {
  color: var(--ces-text-secondary) !important;
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto::before,
.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto[data-modo="10"]::before,
.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto[data-modo="20"]::before {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0), transparent 18%),
    linear-gradient(180deg, rgba(75, 145, 209, 0), rgba(0, 81, 168, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0), 0 0 28px rgba(7, 75, 145, 0);
}

.mode-select-screen:has(#modo-selector) #modo-selector [data-modo="5"] .btn-tipo-icono::before,
.mode-select-screen:has(#modo-selector) #modo-selector [data-modo="10"] .btn-tipo-icono::before {
  color: var(--ces-blue);
}

.mode-select-screen:has(#modo-selector) #modo-selector [data-modo="20"] .btn-tipo-icono::before {
  color: var(--ces-blue);
}

.mode-select-screen:has(#modo-selector) #modo-selector .btn-tipo-reto::after {
  color: var(--ces-blue) !important;
}

.mode-select-screen:has(#modo-selector) #modo-selector-cancelar-btn {
  border-color: var(--ces-border) !important;
  background: linear-gradient(180deg, var(--ces-white), var(--ces-white)) !important;
  color: var(--ces-blue) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 18px 34px rgba(7, 75, 145, 0.08) !important;
}

/* Partida, cabeceras, pregunta y respuestas neutras. */
body.gameplay-active,
body:has(#quiz-screen:not(.hidden)) {
  background-color: var(--ces-bg) !important;
}

body.gameplay-active::after,
body:has(#quiz-screen:not(.hidden))::after {
  background:
    radial-gradient(circle at 50% 24%, rgba(184, 210, 234, 0.12), transparent 34%),
    radial-gradient(circle at 50% 66%, rgba(75, 145, 209, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(8, 43, 92, 0.02) 0%, rgba(8, 43, 92, 0) 44%, rgba(4, 21, 47, 0.1) 100%) !important;
}

#barra-superior,
body.gameplay-active #barra-superior {
  border-color: rgba(255, 255, 255, 0.52) !important;
  background:
    radial-gradient(circle at 50% -24%, rgba(255, 255, 255, 0.14), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(7, 93, 184, 0.94), rgba(0, 81, 168, 0.94)) !important;
  color: var(--ces-white) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 28px rgba(7, 75, 145, 0.18),
    0 0 20px rgba(7, 75, 145, 0.06) !important;
}

#game-panel,
body.gameplay-active #game-panel {
  border-color: var(--ces-border) !important;
  background:
    radial-gradient(circle at 50% -8%, rgba(75, 145, 209, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(242, 247, 252, 0.9)) !important;
  color: var(--ces-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 12px 28px rgba(7, 75, 145, 0.16),
    0 0 20px rgba(7, 75, 145, 0.06) !important;
}

#question-container {
  border-color: var(--ces-border) !important;
  background: linear-gradient(180deg, var(--ces-white), var(--ces-bg)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

#question {
  color: var(--ces-text) !important;
  text-shadow: 0 3px 14px rgba(7, 75, 145, 0.1) !important;
}

.answer-btn:not(.correct):not(.wrong),
html body.gameplay-active .answer-btn:not(.correct):not(.wrong) {
  border-color: var(--ces-border) !important;
  background: linear-gradient(145deg, var(--ces-white), var(--ces-bg)) !important;
  color: var(--ces-text) !important;
  box-shadow: 0 9px 20px rgba(7, 75, 145, 0.18) !important;
}

.answer-btn.selected:not(.correct):not(.wrong),
html body.gameplay-active .answer-btn.selected:not(.correct):not(.wrong) {
  border-color: var(--ces-blue-soft) !important;
  background: linear-gradient(180deg, var(--ces-blue), var(--ces-blue-strong)) !important;
  color: var(--ces-white) !important;
  box-shadow: 0 9px 22px rgba(7, 75, 145, 0.24), 0 0 16px var(--ces-shadow) !important;
}

#comodin-saltar,
#comodin-5050,
#next-btn,
#exit-game-btn {
  background: var(--ces-blue) !important;
  color: var(--ces-white) !important;
  border-color: var(--ces-blue-soft) !important;
  box-shadow: 0 2px 6px var(--ces-shadow) !important;
}

#comodin-saltar:hover,
#comodin-5050:hover,
#next-btn:hover,
#exit-game-btn:hover {
  background: var(--ces-blue-strong) !important;
  color: var(--ces-white) !important;
}

/* El aro se unifica en azul; las barras semánticas verde/amarillo/rojo quedan intactas. */
#timer-bar-wrap,
#timer-bar-wrap-mobile,
body:has(#quiz-screen:not(.hidden)) #timer-bar-wrap,
html body.gameplay-active #timer-bar-wrap#timer-bar-wrap,
html body.gameplay-active #timer-bar-wrap-mobile {
  background: conic-gradient(var(--ces-blue-soft) calc(var(--timer-pct, 1) * 1turn), rgba(184, 210, 234, 0.2) 0) !important;
  box-shadow: 0 0 20px var(--ces-shadow), 0 12px 28px rgba(4, 21, 47, 0.32) !important;
}

#timer-seconds-label,
#timer-seconds-label-mobile {
  color: var(--ces-white) !important;
}

/* Paneles informativos, perfil, ranking, formularios y PWA. */
#explicacion-panel,
#continuar-panel,
#profile-panel,
#ranking-panel,
#como-jugar-panel,
#enviar-pregunta-panel,
.auth-panel,
.pwa-install-card {
  border-color: var(--ces-border) !important;
  background: linear-gradient(180deg, var(--ces-white), var(--ces-bg)) !important;
  color: var(--ces-text) !important;
  box-shadow: 0 24px 60px rgba(7, 75, 145, 0.18) !important;
}

#explicacion-panel p,
#continuar-panel p,
#profile-panel p,
#ranking-panel p,
#como-jugar-panel p,
#enviar-pregunta-panel p,
.auth-panel p,
.pwa-install-card p,
.pwa-install-banner-copy small {
  color: var(--ces-text-secondary) !important;
}

#explicacion-panel h2,
#continuar-panel h2,
#profile-panel h2,
#ranking-panel h2,
#como-jugar-panel h2,
#enviar-pregunta-panel h2,
.auth-panel h2,
.pwa-install-card h2,
.pwa-install-banner-copy strong {
  color: var(--ces-text) !important;
}

#profile-tabs button,
.ranking-tabs button,
.reto-tab {
  border-color: var(--ces-border) !important;
  background: var(--ces-white) !important;
  color: var(--ces-text-secondary) !important;
}

#profile-tabs button.active,
.ranking-tabs button.active,
.reto-tab.active,
html body #retos-screen .reto-tab.active {
  border-color: var(--ces-blue) !important;
  background: var(--ces-blue) !important;
  color: var(--ces-white) !important;
}

.ranking-item,
.ranking-row,
.profile-stat,
.how-step,
.pwa-install-steps li {
  border-color: var(--ces-border) !important;
  background: var(--ces-white) !important;
  color: var(--ces-text) !important;
  box-shadow: 0 8px 20px rgba(7, 75, 145, 0.12) !important;
}

#en-result-pregunta-btn,
#explicacion-continuar-btn,
#continuar-si-btn,
#ranking-ver-completo-btn,
#ranking-cerrar-btn,
#profile-close-btn,
#como-jugar-cerrar-btn,
#enviar-pregunta-submit,
.auth-primary-btn,
.pwa-install-btn,
.pwa-install-banner > #pwa-install-btn.pwa-install-btn {
  border-color: var(--ces-blue-soft) !important;
  background: linear-gradient(180deg, var(--ces-blue), var(--ces-blue-strong)) !important;
  color: var(--ces-white) !important;
  box-shadow: 0 10px 24px var(--ces-shadow) !important;
}

input,
select,
textarea,
#inicio-screen input {
  border-color: var(--ces-border) !important;
  background-color: var(--ces-white) !important;
  color: var(--ces-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--ces-text-secondary) !important;
}

.pwa-install-banner {
  border-color: var(--ces-border) !important;
  background: linear-gradient(180deg, var(--ces-white), var(--ces-white)) !important;
  color: var(--ces-text) !important;
  box-shadow: 0 14px 34px rgba(7, 75, 145, 0.12) !important;
}

html body:not(:has(#quiz-screen:not(.hidden))) #inicio-screen:not(.hidden) .pwa-install-banner > #pwa-install-btn.pwa-install-btn {
  border-color: var(--ces-blue) !important;
  background: var(--ces-blue) !important;
  color: var(--ces-white) !important;
  box-shadow: 0 10px 24px rgba(7, 75, 145, 0.14) !important;
}

.pwa-step-number,
.pwa-step-icon {
  border-color: var(--ces-border) !important;
  background: var(--ces-blue) !important;
  color: var(--ces-white) !important;
}

/* Camino Arlequinado y resultados: identidad de club sin alterar estados. */
#camino-screen,
#camino-mapa-screen,
#resultado-final-screen:not(.resultado-camino-final),
#resultado-ronda-screen {
  color: var(--ces-white) !important;
}

.camino-card,
.camino-stage,
#resultado-final-panel,
#resultado-ronda-panel {
  border-color: var(--ces-border) !important;
  background: linear-gradient(180deg, rgba(8, 43, 92, 0.94), rgba(4, 21, 47, 0.96)) !important;
  color: var(--ces-white) !important;
  box-shadow: 0 18px 46px rgba(7, 75, 145, 0.18) !important;
}

#resultado-final-screen button,
#resultado-ronda-screen button,
.camino-card button,
.camino-stage button {
  border-color: var(--ces-blue-soft) !important;
  background: linear-gradient(180deg, var(--ces-blue), var(--ces-blue-strong)) !important;
  color: var(--ces-white) !important;
  box-shadow: 0 10px 24px var(--ces-shadow) !important;
}

/* Retos: capa conservadora; verde, rojo y dorado semánticos no se sobrescriben. */
#retos-screen,
#reto-tipo-screen,
#reto-crear-screen,
#reto-codigo-screen,
#reto-resultado-screen {
  background-color: rgba(4, 21, 47, 0.82) !important;
}

#retos-panel,
#reto-tipo-panel,
#reto-crear-panel,
#reto-codigo-panel,
#reto-resultado-panel,
.reto-result-shell {
  border-color: rgba(184, 210, 234, 0.5) !important;
  background: linear-gradient(180deg, rgba(8, 43, 92, 0.97), rgba(4, 21, 47, 0.98)) !important;
  color: var(--ces-white) !important;
  box-shadow: 0 28px 70px rgba(7, 75, 145, 0.22) !important;
}

.reto-mode-option:not(.is-active):not(.active):not([aria-pressed="true"]),
.reto-list-item,
.reto-item {
  border-color: rgba(184, 210, 234, 0.34) !important;
  background: rgba(8, 43, 92, 0.72) !important;
  color: var(--ces-white) !important;
}

.reto-mode-option.is-active,
.reto-mode-option.active,
.reto-mode-option[aria-pressed="true"] {
  border-color: var(--ces-blue-soft) !important;
  background: linear-gradient(180deg, var(--ces-blue), var(--ces-blue-strong)) !important;
  color: var(--ces-white) !important;
  box-shadow: 0 8px 20px var(--ces-shadow) !important;
}