/* Cabecera del perfil, con la piel de Master of Cladia. Antes tenia su propia paleta azulada y repintaba
   el fondo de la pagina, igual que la hoja del perfil: las dos peleaban por el mismo `body`. */
    body {
        font-family: var(--qg-public-font-body);
        color: var(--qg-public-moc-text);
    }

    .profile-container {

        margin: 0 auto;
        position: relative;
    }

    /* El Banner con el degradado de la imagen */
    .profile-banner {
        width: 100%;
        height: 500px;
        background: var(--qg-public-gradient-moc-banner), url('/assets/images/BannerFondoDragones.png');
        background-size: cover; /* La imagen cubrirá todo el espacio */
        background-position: center; /* Centra la imagen */
        border-radius: var(--qg-public-radius-xl);
        box-shadow: inset 0 0 20px var(--qg-public-color-black-50);
        border: 1px solid var(--qg-public-color-white-05);
    }

    /* Contenedor para posicionar avatar e info */
    .profile-content {
        display: flex;
        align-items: flex-end;
        padding: 0 30px;
        margin-top: -60px; /* Sube el contenido para que el avatar pise el banner */
    }

    /* Estilo del Avatar */
    .avatar-wrapper {
        position: relative;
        padding: 5px;
        background: transparent;
        border-radius: var(--qg-public-radius-lg);

    }

    .profile-avatar {
        width: 120px;
        height: 120px;
        border-radius: var(--qg-public-radius-md);
        display: block;
        object-fit: cover;

        filter: drop-shadow(0px 8px 12px var(--qg-public-color-black-70)) drop-shadow(0px 0px 5px var(--qg-public-color-black-50));
        transition: transform 0.3s ease;
    }

    /* Etiqueta de Nivel */
    .profile-level {
        position: absolute;
        bottom: -1px;
        right: -34px;
        /* Pastilla de oro de la piel de Cladia */
        background: var(--qg-public-gradient-gold);
        /* Sobre oro, la tinta oscura del juego se lee mucho mejor que el blanco */
        color: var(--qg-public-color-game-ink);
        text-shadow: 0 1px 1px var(--qg-public-color-white-35);
        font-size: 12px;
        font-weight: 800; /* Un poco más de peso para que resalte */
        text-transform: uppercase; /* El estilo mítico suele lucir mejor en mayúsculas */
        letter-spacing: 0.5px;
        padding: 5px 14px;
        border-radius: var(--qg-public-radius-xl);
        /* Filete del mismo oro, algo más oscuro */
        border: 1px solid var(--qg-public-color-gold-shadow);
        /* Halo cálido */
        box-shadow: 0 4px 15px var(--qg-public-color-black-60), 0 0 12px var(--qg-public-color-gold-shadow);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: default;
    }

        .profile-level:hover {
            /* Efecto de elevación y aumento de intensidad del neón */
            transform: translateY(-3px) scale(1.08);
            background: var(--qg-public-gradient-gold-light);
            box-shadow: 0 8px 25px var(--qg-public-color-black-70), 0 0 25px var(--qg-public-color-gold-border);
        }

    /* Textos */
    .profile-info {
        margin-left: 20px;
        margin-bottom: 30px;
    }

    .profile-name {
        font-size: 28px;
        margin: 0;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-family: var(--qg-public-font-heading); /* Para ese toque clásico */
        text-shadow: 2px 2px 4px var(--qg-public-color-black-50);
    }

    /* WP33: aqui vivia `.profile-title`, el "Harbinger of the Void" de la maqueta. Al retirarlo de la vista,
       su regla se queda sin nada que pintar. */
    .parallax-background {
        padding: 4% 2%;
    }
    .parallax-background::before {
        background-image: url('../../../images/Moc/fondosTex/Castle.png');
    }
    @media (max-width: 700px) {
    /* Ajustamos el banner para que no ocupe tanto espacio vertical */
    .profile-banner {
        height: 120px;
        border-radius: var(--qg-public-radius-lg);
    }

    /* Centramos el contenido en móviles */
    .profile-content {
        flex-direction: column;
        align-items: center;
        padding: 0 15px;
        margin-top: -50px; /* Ajuste para el nuevo tamaño de avatar */
    }

    /* Reducimos el avatar para que no sea gigante en el móvil */
    .profile-avatar {
        width: 100px;
        height: 100px;
        border-radius: var(--qg-public-radius-sm);
    }

    /* Reposicionamos la etiqueta de nivel para que no se salga de la pantalla */
    .profile-level {
        right: 50%;
        transform: translateX(50%); /* Lo centramos respecto al avatar */
        bottom: -10px;
        padding: 4px 10px;
        font-size: 10px;
        white-space: nowrap;
    }

    .profile-level:hover {
        /* Mantenemos el efecto pero ajustado al centrado */
        transform: translateX(50%) translateY(-2px) scale(1.05);
    }

    /* Ajustamos los textos para que no se amontonen */
    .profile-info {
        margin-left: 0; /* Quitamos el margen lateral del flex horizontal */
        margin-top: 20px;
        margin-bottom: 15px;
        text-align: center; /* Centramos el nombre y el título */
    }

    .profile-name {
        font-size: 22px; /* Un poco más pequeño para evitar saltos de línea feos */
    }
}

/* WP05.3: la cabecera deja de ser un bloque vacío de 500 px. El avatar, el nombre y la primera fila de datos
   van superpuestos sobre la imagen, pegados a su parte inferior. */
.profile-banner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 24px;
    height: auto;
    min-height: 420px;
    padding: 40px 30px 30px;
}

.profile-banner .profile-content {
    margin-top: 0;
    padding: 0;
}

.profile-banner .profile-info {
    margin-bottom: 10px;
}

.profile-banner .stats-grid {
    width: 100%;
    margin-top: 0;
}

@media (max-width: 700px) {
    .profile-banner {
        min-height: 0;
        padding: 24px 15px 15px;
    }

    .profile-banner .profile-content {
        margin-top: 0;
    }

    .profile-banner .profile-info {
        margin-top: 12px;
    }
}

/* WP32: la cabecera pasa de 430 px a lo que ocupan el avatar, el nombre y la franja de cifras. El alto minimo
   de 420 px la obligaba a estirarse aunque no hubiera nada que poner dentro. */
.profile-banner {
    min-height: 0;
    gap: var(--qg-public-space-md);
    padding: var(--qg-public-space-lg) var(--qg-public-space-md) var(--qg-public-space-md);
}

.profile-banner .profile-info {
    margin-bottom: 0;
}

/* El ultimo personaje, en una linea bajo el nombre: antes ocupaba una tarjeta entera de la franja de cifras. */
.profile-personaje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: .3rem 0 0;
    font-size: .95rem;
}

.profile-personaje-etiqueta {
    color: var(--qg-public-moc-text-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profile-personaje-nombre {
    color: var(--qg-public-color-parchment-gold);
    font-family: var(--qg-public-font-heading);
}

@media (max-width: 700px) {
    .profile-personaje {
        justify-content: center;
    }
}

/* La pastilla "Premium" colgaba 34 px por la derecha del avatar, sobre el hueco que antes estaba vacio. Con el
   ultimo personaje ahi debajo le tapaba el principio, asi que se centra bajo el avatar, como ya hacia en movil.
   El centrado usa `translate` para no pelearse con el `transform` de su animacion al pasar por encima. */
.profile-level {
    right: auto;
    left: 50%;
    translate: -50% 0;
}

@media (max-width: 700px) {
    .profile-level {
        transform: none;
    }

    .profile-level:hover {
        transform: translateY(-2px) scale(1.05);
    }
}