@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-primario: #FF6B6B;
    --color-secundario: #4CC9F0;
    --color-exito: #06D6A0;
    --color-error: #EF476F;
    --color-advertencia: #FFD166;
    --color-fondo: #161B33;
    --color-panel: rgba(255, 255, 255, 0.06);
    --color-panel-borde: rgba(255, 255, 255, 0.12);
    --color-texto: #EAEFFF;
    --color-gris: #8C93BD;
    --dorado: #FFD166;
    --violeta: #9D4EDD;
    --celeste: #4CC9F0;
    --sombra: 0 8px 20px rgba(0, 0, 0, 0.35);
    --sombra-fuerte: 0 16px 36px rgba(0, 0, 0, 0.5);
    --brillo-dorado: 0 0 18px rgba(255, 209, 102, 0.55);
    --brillo-celeste: 0 0 18px rgba(76, 201, 240, 0.45);
    --radio: 16px;
    --fuente-titulos: 'Baloo 2', sans-serif;
    --fuente-numeros: 'Space Mono', 'Courier New', monospace;
}

body {
    font-family: var(--fuente-titulos);
    background:
        radial-gradient(circle at 15% 20%, rgba(157, 78, 221, 0.35) 0%, transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(76, 201, 240, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 90%, rgba(255, 209, 102, 0.12) 0%, transparent 45%),
        linear-gradient(160deg, #0B0F2E 0%, #161B33 45%, #1F1547 100%);
    background-attachment: fixed;
    color: var(--color-texto);
    min-height: 100vh;
    padding: 10px;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '∑ π √ ∞ Δ × ÷ = + − E=mc² a²+b²=c²';
    position: fixed;
    inset: 0;
    color: rgba(255, 255, 255, 0.035);
    font-family: var(--fuente-numeros);
    font-size: 2.4rem;
    line-height: 4rem;
    letter-spacing: 1rem;
    word-spacing: 2rem;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(13, 17, 45, 0.72);
    backdrop-filter: blur(14px);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--sombra-fuerte), 0 0 0 1px rgba(255, 255, 255, 0.08);
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.pantalla {
    display: none;
    padding: 20px;
    min-height: 100vh;
    animation: fadeIn 0.35s ease-in;
}

.pantalla.activa {
    display: block;
}

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

@keyframes brilloPulsante {
    0%, 100% { box-shadow: var(--brillo-dorado); }
    50% { box-shadow: 0 0 30px rgba(255, 209, 102, 0.85); }
}

@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* =============== PANTALLA DE INICIO =============== */
.contenedor-inicio {
    text-align: center;
    padding: 20px;
}

.titulo-inicio {
    font-family: var(--fuente-titulos);
    font-weight: 800;
    font-size: 2.6rem;
    background: linear-gradient(90deg, var(--dorado), var(--celeste), var(--violeta));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.subtitulo {
    font-size: 1.1rem;
    color: var(--color-gris);
    margin-bottom: 30px;
}

.tarjetas-juegos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.tarjeta-juego {
    background: var(--color-panel);
    border-radius: var(--radio);
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--sombra);
    border: 2px solid var(--color-panel-borde);
}

.tarjeta-juego:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: var(--brillo-celeste), var(--sombra-fuerte);
    border-color: var(--celeste);
}

.icono-juego {
    font-size: 3rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.25));
}

.tarjeta-juego h3 {
    font-family: var(--fuente-titulos);
    color: var(--dorado);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.tarjeta-juego p {
    color: var(--color-gris);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* =============== BOTONES Y CONTROLES =============== */
.btn-primario,
.btn-secundario,
.btn-nivel,
.btn-enviar,
.btn-vf,
.btn-opcion,
.btn-salir,
.btn-volver {
    border: none;
    border-radius: var(--radio);
    padding: 12px 24px;
    font-size: 1rem;
    font-family: var(--fuente-titulos);
    cursor: pointer;
    transition: all 0.25s ease;
    font-weight: 600;
}

.btn-primario {
    background: linear-gradient(135deg, var(--violeta) 0%, #5A189A 100%);
    color: white;
    padding: 15px 30px;
    box-shadow: 0 4px 14px rgba(157, 78, 221, 0.5);
}

.btn-primario:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(157, 78, 221, 0.7);
}

.btn-secundario {
    background: linear-gradient(135deg, var(--celeste) 0%, #3A86FF 100%);
    color: #0B0F2E;
    padding: 15px 30px;
    box-shadow: 0 4px 14px rgba(76, 201, 240, 0.4);
}

.btn-secundario:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(76, 201, 240, 0.6);
}

.btn-nivel {
    background: var(--color-panel);
    border: 2px solid var(--color-panel-borde);
    color: var(--color-texto);
    width: 100%;
    padding: 15px;
    margin: 8px 0;
}

.btn-nivel:hover {
    transform: translateX(5px);
    border-color: var(--celeste);
    box-shadow: var(--brillo-celeste);
}

.btn-todas {
    background: linear-gradient(135deg, var(--dorado) 0%, #FF9F43 100%);
    color: #2C1A00;
    border-color: transparent;
}

.btn-enviar {
    background: linear-gradient(135deg, var(--color-exito) 0%, #1B9E77 100%);
    color: #07241B;
    width: 100%;
    padding: 15px;
    margin-top: 10px;
    box-shadow: 0 4px 14px rgba(6, 214, 160, 0.4);
}

.btn-enviar:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 18px rgba(6, 214, 160, 0.6);
}

.btn-vf {
    width: 100%;
    padding: 20px;
    font-size: 1.2rem;
    margin: 10px 0;
    color: white;
}

.btn-vf.verdadero {
    background: linear-gradient(135deg, var(--color-exito) 0%, #1B9E77 100%);
    color: #07241B;
}

.btn-vf.verdadero:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(6, 214, 160, 0.5);
}

.btn-vf.falso {
    background: linear-gradient(135deg, var(--color-error) 0%, #B5174E 100%);
}

.btn-vf.falso:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(239, 71, 111, 0.5);
}

.btn-opcion {
    background: var(--color-panel);
    border: 2px solid var(--color-panel-borde);
    color: var(--color-texto);
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    text-align: left;
}

.btn-opcion:hover {
    border-color: var(--celeste);
    transform: translateX(5px);
    box-shadow: var(--brillo-celeste);
}

.btn-opcion.seleccionado {
    background: linear-gradient(135deg, var(--color-exito) 0%, #1B9E77 100%);
    color: #07241B;
    border-color: transparent;
}

.btn-opcion.incorrecto {
    background: linear-gradient(135deg, var(--color-error) 0%, #B5174E 100%);
    border-color: transparent;
    color: white;
}

.btn-salir {
    background: var(--color-panel);
    border: 2px solid var(--color-panel-borde);
    color: var(--color-texto);
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 1.3rem;
}

.btn-salir:hover {
    border-color: var(--color-error);
    color: var(--color-error);
}

.btn-volver {
    background: var(--color-panel);
    border: 2px solid var(--color-panel-borde);
    color: var(--color-texto);
    margin-top: 20px;
}

.btn-volver:hover {
    border-color: var(--celeste);
    box-shadow: var(--brillo-celeste);
}

/* =============== PANTALLA DE NIVEL =============== */
.contenedor-nivel {
    text-align: center;
    padding: 20px;
}

.contenedor-nivel h2 {
    font-family: var(--fuente-titulos);
    color: var(--dorado);
    margin-bottom: 30px;
    font-size: 1.5rem;
}

.botones-nivel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

/* =============== PANTALLA DE DIFICULTAD COLUMNAS =============== */
.contenedor-dificultad {
    text-align: center;
    padding: 20px;
}

.contenedor-dificultad h2 {
    font-family: var(--fuente-titulos);
    color: var(--dorado);
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.contenedor-dificultad p {
    color: var(--color-gris);
    margin-bottom: 30px;
    font-size: 1rem;
}

.dificultades {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.card-dificultad {
    background: var(--color-panel);
    padding: 20px;
    border-radius: var(--radio);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--sombra);
    border: 2px solid var(--color-panel-borde);
}

.card-dificultad:hover {
    transform: translateY(-5px);
    box-shadow: var(--brillo-celeste), var(--sombra-fuerte);
    border-color: var(--celeste);
}

.numero-dif {
    font-family: var(--fuente-numeros);
    font-size: 2rem;
    font-weight: 700;
    color: var(--dorado);
    margin-bottom: 10px;
}

.card-dificultad p {
    color: var(--color-gris);
    margin: 8px 0;
    font-weight: 600;
}

.ejemplo {
    display: block;
    font-family: var(--fuente-numeros);
    color: var(--celeste);
    font-size: 0.95rem;
    margin-top: 10px;
}

/* =============== CONTENEDOR DE JUEGO =============== */
.contenedor-juego {
    padding: 20px;
}

.barra-superior {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    background: var(--color-panel);
    padding: 15px;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    border: 1px solid var(--color-panel-borde);
}

.info-juego {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    font-weight: 600;
}

.info-juego span {
    color: var(--dorado);
    font-size: 1.1rem;
}

.barra-superior .btn-salir {
    position: absolute;
    right: 20px;
    top: 20px;
}

.pregunta-container {
    background: var(--color-panel);
    padding: 30px;
    border-radius: var(--radio);
    margin-bottom: 20px;
    box-shadow: var(--sombra);
    text-align: center;
    border: 1px solid var(--color-panel-borde);
}

.pregunta {
    font-family: var(--fuente-numeros);
    color: var(--dorado);
    font-size: 1.8rem;
    margin: 0;
}

.respuesta-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

#respuesta-input {
    flex: 1;
    padding: 15px;
    font-size: 1.2rem;
    font-family: var(--fuente-numeros);
    background: var(--color-panel);
    border: 2px solid var(--color-panel-borde);
    border-radius: var(--radio);
    text-align: center;
    color: var(--color-texto);
}

#respuesta-input:focus {
    outline: none;
    border-color: var(--celeste);
    box-shadow: var(--brillo-celeste);
}

.opciones-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.botones-vf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

/* =============== MULTIPLICACIÓN POR COLUMNAS =============== */
.columna-container {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.multiplicacion-columna-extendida {
    background: var(--color-panel);
    padding: 25px;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    border: 1px solid var(--color-panel-borde);
    font-family: var(--fuente-numeros);
    min-width: 280px;
    max-width: 400px;
}

.fila-acarreos {
    display: flex;
    justify-content: flex-end;
    gap: 3px;
    margin-bottom: 8px;
    min-height: 28px;
}

.cuadricula-acarreo {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 209, 102, 0.5);
    background: rgba(255, 209, 102, 0.12);
    color: var(--color-texto);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    border-radius: 4px;
    font-family: var(--fuente-numeros);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cuadricula-acarreo:focus {
    outline: none;
    border-color: var(--dorado);
    background: rgba(255, 209, 102, 0.22);
    box-shadow: var(--brillo-dorado);
}

.fila-operacion {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 5px;
}

.numero-grande {
    font-size: 2rem;
    font-weight: 700;
    color: var(--celeste);
    letter-spacing: 3px;
    text-align: right;
}

.simbolo-multiplicacion {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dorado);
    margin-right: 8px;
}

.linea-gruesa {
    border-top: 3px solid var(--celeste);
    margin: 12px 0;
    box-shadow: var(--brillo-celeste);
}

#filas-parciales {
    margin-bottom: 5px;
}

.fila-parcial {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 3px;
    position: relative;
}

.parcial-número {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: right;
    position: relative;
    z-index: 2;
}

.parcial-color-naranja {
    color: var(--dorado);
}

.parcial-color-azul {
    color: var(--celeste);
}

.parcial-color-verde {
    color: var(--color-exito);
}

.parcial-color-morado {
    color: var(--violeta);
}

.cuadrículas {
    display: inline-flex;
    gap: 3px;
    margin-left: 8px;
    margin-right: var(--desplazamiento, 0);
}

.cuadricula-input {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-panel-borde);
    background: rgba(255, 209, 102, 0.12);
    color: var(--color-texto);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    border-radius: 4px;
    font-family: var(--fuente-numeros);
    padding: 0;
}

.cuadricula-input:focus {
    outline: none;
    border-color: var(--dorado);
    background: rgba(255, 209, 102, 0.22);
    box-shadow: var(--brillo-dorado);
}

.cuadricula-input.error {
    border-color: var(--color-error);
    background: rgba(239, 71, 111, 0.18);
    box-shadow: 0 0 8px rgba(239, 71, 111, 0.5);
}

.fila-resultado {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.cuadricula-resultado {
    width: 34px;
    height: 34px;
    border: 2px solid var(--celeste);
    background: rgba(76, 201, 240, 0.1);
    color: var(--color-texto);
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    border-radius: 4px;
    font-family: var(--fuente-numeros);
    padding: 0;
    margin-left: 3px;
}

.cuadricula-resultado:focus {
    outline: none;
    border-color: var(--dorado);
    background: rgba(255, 209, 102, 0.15);
    box-shadow: var(--brillo-dorado);
}

.cuadricula-resultado.error {
    border-color: var(--color-error);
    background: rgba(239, 71, 111, 0.18);
    box-shadow: 0 0 8px rgba(239, 71, 111, 0.5);
}

.botones-columna {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.feedback {
    text-align: center;
    padding: 15px;
    border-radius: var(--radio);
    font-weight: 600;
    min-height: 30px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feedback.correcto {
    background: rgba(6, 214, 160, 0.15);
    border: 1px solid rgba(6, 214, 160, 0.4);
    color: var(--color-exito);
    font-size: 1.1rem;
}

.feedback.correcto::before {
    content: "✅ ";
}

.feedback.incorrecto {
    background: rgba(239, 71, 111, 0.15);
    border: 1px solid rgba(239, 71, 111, 0.4);
    color: var(--color-error);
    font-size: 1.1rem;
}

.feedback.incorrecto::before {
    content: "❌ ";
}

/* =============== PANTALLA DE RESULTADOS =============== */
.contenedor-resultados {
    text-align: center;
    padding: 20px;
    background: var(--color-panel);
    border-radius: var(--radio);
    margin: 20px 0;
    box-shadow: var(--sombra-fuerte);
    border: 1px solid var(--color-panel-borde);
}

.contenedor-resultados h2 {
    font-family: var(--fuente-titulos);
    color: var(--dorado);
    font-size: 2rem;
    margin-bottom: 30px;
}

.resultado-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.puntuacion-total {
    background: linear-gradient(135deg, var(--violeta) 0%, #3A0CA3 100%);
    color: white;
    padding: 30px;
    border-radius: var(--radio);
    box-shadow: 0 4px 18px rgba(157, 78, 221, 0.4);
}

.numero-grande {
    font-family: var(--fuente-numeros);
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.puntuacion-total p {
    font-size: 1.2rem;
}

.estadisticas-resultado {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-panel-borde);
    padding: 30px;
    border-radius: var(--radio);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.estadisticas-resultado p {
    font-size: 1.1rem;
    margin: 8px 0;
    color: var(--color-texto);
}

.estadisticas-resultado span {
    font-family: var(--fuente-numeros);
    font-weight: 700;
    color: var(--dorado);
}

.mensaje-motivacion {
    background: linear-gradient(135deg, var(--celeste) 0%, var(--violeta) 100%);
    color: white;
    padding: 20px;
    border-radius: var(--radio);
    font-size: 1.2rem;
    margin-bottom: 30px;
    font-weight: 600;
}

.botones-resultado {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* =============== PANTALLA DE ESTADÍSTICAS =============== */
.contenedor-estadisticas {
    padding: 20px;
}

.contenedor-estadisticas h2 {
    font-family: var(--fuente-titulos);
    color: var(--dorado);
    text-align: center;
    margin-bottom: 30px;
    font-size: 2rem;
}

.seccion-graficos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.grafico-container {
    background: var(--color-panel);
    padding: 20px;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    border: 1px solid var(--color-panel-borde);
}

.grafico-container h3 {
    font-family: var(--fuente-titulos);
    color: var(--dorado);
    margin-bottom: 15px;
    text-align: center;
}

.grafico-container canvas {
    max-width: 100%;
    height: auto;
}

.resumen-general {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.card-stat {
    background: var(--color-panel);
    padding: 20px;
    border-radius: var(--radio);
    text-align: center;
    box-shadow: var(--sombra);
    border: 1px solid var(--color-panel-borde);
    border-top: 4px solid var(--dorado);
}

.numero-stat {
    font-family: var(--fuente-numeros);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dorado);
    margin-bottom: 10px;
}

.card-stat p {
    color: var(--color-gris);
    font-weight: 600;
}

.tabla-resultados {
    background: var(--color-panel);
    padding: 20px;
    border-radius: var(--radio);
    margin-bottom: 20px;
    box-shadow: var(--sombra);
    border: 1px solid var(--color-panel-borde);
}

.tabla-resultados h3 {
    font-family: var(--fuente-titulos);
    color: var(--dorado);
    margin-bottom: 15px;
}

.lista-resultados {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.resultado-item {
    background: rgba(255, 255, 255, 0.04);
    padding: 12px;
    border-radius: var(--radio);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid var(--celeste);
}

.resultado-item.excelente {
    border-left-color: var(--color-exito);
}

.resultado-item.bueno {
    border-left-color: var(--celeste);
}

.resultado-item.mejorar {
    border-left-color: var(--color-advertencia);
}

.resultado-detalles {
    flex: 1;
}

.resultado-juego {
    font-weight: 600;
    color: var(--color-texto);
}

.resultado-fecha {
    font-size: 0.85rem;
    color: var(--color-gris);
}

.resultado-puntos {
    font-family: var(--fuente-numeros);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dorado);
}

/* =============== SISTEMA DE INSIGNIAS =============== */
.seccion-insignias-titulo {
    background: var(--color-panel);
    padding: 20px;
    border-radius: var(--radio);
    margin-bottom: 20px;
    box-shadow: var(--sombra);
    border: 1px solid var(--color-panel-borde);
}

.seccion-insignias-titulo h3 {
    font-family: var(--fuente-titulos);
    color: var(--dorado);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contador-insignias {
    font-family: var(--fuente-numeros);
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-panel-borde);
    color: var(--color-texto);
    padding: 4px 12px;
    border-radius: 20px;
}

.seccion-insignias {
    margin-bottom: 18px;
}

.seccion-insignias h4 {
    color: var(--celeste);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.grilla-insignias-grupo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.insignia-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 8px;
    border-radius: var(--radio);
    gap: 6px;
    transition: transform 0.2s ease;
}

.insignia-card:hover {
    transform: scale(1.05);
}

.insignia-card.ganada {
    background: linear-gradient(160deg, rgba(255, 209, 102, 0.18) 0%, rgba(157, 78, 221, 0.18) 100%);
    border: 2px solid var(--dorado);
    box-shadow: var(--brillo-dorado);
    animation: flotar 3s ease-in-out infinite;
}

.insignia-card.bloqueada {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid var(--color-panel-borde);
    filter: grayscale(1);
    opacity: 0.4;
}

.insignia-card-icono {
    font-size: 2rem;
}

.insignia-card-nombre {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-texto);
    line-height: 1.2;
}

.insignias-nuevas {
    display: none;
    background: linear-gradient(160deg, rgba(255, 209, 102, 0.18) 0%, rgba(157, 78, 221, 0.18) 100%);
    border: 2px solid var(--dorado);
    border-radius: var(--radio);
    padding: 15px;
    margin-bottom: 20px;
    animation: brilloPulsante 2s ease-in-out infinite;
}

.insignias-nuevas h3 {
    font-family: var(--fuente-titulos);
    text-align: center;
    color: var(--dorado);
    margin-bottom: 10px;
}

.insignia-ganada {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(13, 17, 45, 0.55);
    border-radius: var(--radio);
    padding: 10px 12px;
    margin-bottom: 8px;
}

.insignia-ganada .insignia-icono {
    font-size: 1.8rem;
}

.insignia-ganada strong {
    font-family: var(--fuente-titulos);
    color: var(--dorado);
    display: block;
}

.insignia-ganada p {
    font-size: 0.85rem;
    color: var(--color-gris);
    margin: 0;
}

.sin-datos {
    text-align: center;
    color: var(--color-gris);
    padding: 30px;
}

.botones-estadisticas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* =============== RESPONSIVO =============== */
@media (max-width: 768px) {
    .titulo-inicio {
        font-size: 2rem;
    }

    .subtitulo {
        font-size: 1rem;
    }

    .tarjetas-juegos {
        grid-template-columns: 1fr;
    }

    .botones-nivel {
        grid-template-columns: repeat(2, 1fr);
    }

    .resultado-info {
        grid-template-columns: 1fr;
    }

    .resumen-general {
        grid-template-columns: 1fr;
    }

    .grilla-insignias-grupo {
        grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    }

    .insignia-card-icono {
        font-size: 1.5rem;
    }

    .botones-resultado,
    .botones-estadisticas {
        grid-template-columns: 1fr;
    }

    .info-juego {
        gap: 10px;
        font-size: 0.9rem;
    }

    .pregunta {
        font-size: 1.5rem;
    }

    .botones-vf {
        grid-template-columns: 1fr;
    }

    .resultado-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .resultado-puntos {
        align-self: flex-start;
    }

    .seccion-graficos {
        grid-template-columns: 1fr;
    }

    .dificultades {
        grid-template-columns: 1fr;
    }

    .card-dificultad {
        padding: 15px;
    }

    .numero-dif {
        font-size: 1.5rem;
    }

    .multiplicacion-columna-extendida {
        min-width: 220px;
        padding: 20px;
    }

    .numero-grande {
        font-size: 1.5rem;
    }

    .parcial-número {
        font-size: 1.3rem;
    }

    .cuadricula-resultado {
        width: 28px;
        height: 28px;
        font-size: 1.1rem;
    }

    .botones-columna {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .container {
        border-radius: 0;
    }

    .pantalla {
        padding: 15px;
    }

    .titulo-inicio {
        font-size: 1.5rem;
    }

    .icono-juego {
        font-size: 2.5rem;
    }

    .tarjeta-juego h3 {
        font-size: 1rem;
    }

    .tarjeta-juego p {
        font-size: 0.85rem;
    }

    .btn-nivel {
        padding: 12px;
    }

    .botones-nivel {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .numero-grande {
        font-size: 2.5rem;
    }

    .numero-stat {
        font-size: 2rem;
    }

    .barra-superior {
        flex-direction: column;
        gap: 10px;
    }

    .barra-superior .btn-salir {
        position: static;
        width: 100%;
    }

    .info-juego {
        flex-direction: column;
    }

    .pregunta-container {
        padding: 20px;
    }

    .pregunta {
        font-size: 1.3rem;
    }

    .respuesta-container {
        flex-direction: column;
    }

    .btn-enviar {
        margin: 10px 0 0 0;
    }
}